在click - react-native上更改颜色
，可以通过修改组件的样式来实现。在React Native中，可以使用StyleSheet来定义组件的样式，其中包括颜色的设置。
首先，需要导入StyleSheet组件：
import { StyleSheet } from 'react-native';然后，可以在组件的样式中设置颜色。例如，如果要更改一个按钮的背景颜色为红色，可以这样写：
const styles = StyleSheet.create({
button: {
backgroundColor: 'red',
},
});接下来，在组件中使用定义的样式：
import React from 'react';
import { View, TouchableOpacity, Text } from 'react-native';
const MyComponent = () => {
return (
<View>
<TouchableOpacity style={styles.button}>
<Text>Click Me</Text>
</TouchableOpacity>
</View>
);
};
export default MyComponent;这样，按钮的背景颜色就会被设置为红色。
在React Native中，还可以使用其他颜色表示方式，例如使用十六进制值或RGBA值。例如，要设置按钮的背景颜色为蓝色，可以这样写：
const styles = StyleSheet.create({
button: {
backgroundColor: '#0000FF',
},
});或者使用RGBA值：
const styles = StyleSheet.create({
button: {
backgroundColor: 'rgba(0, 0, 255, 1)',
},
});这样，按钮的背景颜色就会被设置为蓝色。
总结： 在click - react-native上更改颜色，可以通过修改组件的样式来实现。可以使用StyleSheet来定义组件的样式，并在样式中设置颜色。可以使用颜色名称、十六进制值或RGBA值来表示颜色。
相关·内容
4回答
我刚接触react native，我有一个简单的app.js文件 import { StatusBar } from 'expo-status-bar';
import React from 'react';
import { Button, View } from 'react-native';
export default function App() {
return (
<View style={styles.container}>
<Button title="CLick Me
浏览 64提问于2021-04-02得票数 0
回答已采纳
2回答
我在react-native app中使用react-native app。react-navigation确实有预置的SafeAreaView。但是，我对SafeAreaView的底部填充有非常具体的设计，如下所示：
1)自定义SafeAreaView的颜色，即我需要在红色框中指定底部填充的自定义单一颜色。指定的自定义单一颜色可能/可能与顶部填充颜色不相同，并且它在不同的屏幕上有所不同。因此，我需要能够明确地声明这个屏幕需要这个特定的颜色。
例：<SafeAreaView bottomPaddingColor={'green'}></SafeAreaView
浏览 3提问于2020-01-19得票数 2
回答已采纳
我正在使用SegmentedControlIOS，我无法在react-native中更改SegmentedControlIOS中的值的大小和颜色。
<SegmentedControlIOS
tintColor="#D7D7D5"
style={styles.SegmentedControlIOS}
values={this.state.values}//for these values i need to set the size and color
selectedIndex={this.state
浏览 0提问于2015-10-30得票数 1
3回答
我们在react-native ()中有proptype elevation，但是我如何设置它生成的“android-elevation”的颜色呢？
浏览 26提问于2016-09-15得票数 6
回答已采纳
import React from "react";
import { StatusBar, StyleSheet } from "react-native";
import { Fontisto } from "@expo/vector-icons";
import SwitchSelector from "react-native-switch-selector";
const options = [
{ label: "M", value: "M", customIcon: <F
浏览 15提问于2021-03-31得票数 0
在下面的ReactiveNative(0.63.3)应用程序中，仿真器上的文本颜色是黑色的，但在Android 10处于黑暗模式的设备上测试时，文本颜色被覆盖为白色。
import React from 'react';
import {View, Text} from 'react-native';
const App = () => {
return (
<View style={{flex: 1, backgroundColor: "#ccc"}}>
<Text style={{color
浏览 4提问于2021-02-25得票数 5
我在我的项目.But中使用了accordion- collapse react-native，我试图动态地改变每个折叠颜色，这是基于Qr扫描的。我不能显示每个collapse.can的颜色你帮我解决吗？
浏览 17提问于2019-10-22得票数 0
1回答
我所做的是让用户可以实时更改设备方案(light or dark)的颜色。
在ios上，当我在设备上按组合键：Command + Uppercase + A时，它就能正常工作。
事件被截获，并实时更改主题。
在Android上，我尝试从按钮菜单中更改主题颜色，正如您从图像中所看到的那样。
该事件未被截获，我必须退出应用程序片刻，然后重新进入以使更改生效。
我使用的是import {useColorScheme} from 'react-native'。
我也试过import {useColorScheme} from 'react-native-appeara
浏览 3提问于2020-11-30得票数 1
2回答
按钮在单击时会更改颜色
、、、、
我目前使用的是react-native。我的目标是让按钮的颜色在每次被点击时都是随机的颜色。 import React, { Component } from 'react';
import { Text, View, StyleSheet, Button } from 'react-native';
export default class App extends Component {
constructor() {
super();
this.state = {
counter: 0,
buttonColor
浏览 8提问于2021-04-12得票数 2
回答已采纳
请告诉我，如何正确地将应用程序图标的默认背景颜色从白色更改为我选择的颜色？
我使用的是React-native 0.62
浏览 16提问于2020-05-14得票数 0
早上好，我用react-native尝试了一个简单的组件，它改变了我的按钮的颜色，而onFocus().I找不到如何改变颜色。这是我的组件。你有什么想法吗？ import React, {Component} from 'react';
import {
StyleSheet,Text, View, Button,
} from 'react-native';
export default class App extends Component {
render() {
r
浏览 45提问于2018-12-19得票数 0
回答已采纳
1回答
我正在尝试更改react-native中ScrollView的滚动指示器的颜色。如果我在Android上使用这个prop，我会得到一个错误，indicatorStyle不是一个有效的属性。现在这并不令人惊讶，因为它在文档中进行了描述，它只在iOS上受支持。 现在的问题是，有没有办法改变Android上指示器的颜色？
浏览 11提问于2019-02-19得票数 3
我是新来的反应本地人。我试图遵循官方文档- 创建一个反应输入文本框。
它使用Android ADV。当我点击输入文本框时，键盘不会打开。同样，在Click事件上，什么也没有发生。这是密码。
import React, { Component } from 'react'
import {
StyleSheet,
TouchableOpacity,
Text,
View,
} from 'react-native'
export default class Login extends Component {
state =
浏览 1提问于2020-07-28得票数 0
5回答
我将react-native与react-native-paper结合使用。
我有以下代码：
import React, { Component } from 'react';
import { View, StyleSheet } from 'react-native';
import { Button, TextInput } from 'react-native-paper';
export default class Header extends Component {
state = {
text: ''
浏览 1提问于2019-02-25得票数 2
回答已采纳
我在我的react原生应用程序中使用ToastAndroid，默认情况下它从设备的主题中获取背景颜色，但我需要覆盖它。请不要建议使用其他软件包，我知道它们。我感兴趣的是，是否有可能用这个从“react-native”导入的组件来做这件事。谢谢！
浏览 30提问于2021-04-29得票数 0
1回答
正在尝试自定义单选按钮。它适用于背景或按钮大小，但不适用于图标大小、颜色和位置。
会出什么问题呢？
这是我的代码和结果。
Radio.js
import { Platform } from "react-native";
import variable from "./../variables/platform";
export default (variables = variable) => {
const radioTheme = {
backgroundColor: '#000',
width: 20,
浏览 4提问于2018-03-18得票数 0
2回答
我在我的项目中使用了react-native导航库，我的状态栏出现了一些问题。第一个问题是我无法在iOS上更改我的状态栏背景颜色，所以我创建了一个组件，如下所示：
const S_StatusBar = ({ backgroundColor, ...props }) => (
<View style={[styles.statusBar, { backgroundColor }]}>
<StatusBar translucent backgroundColor={backgroundColor} {...props} />
</View>
浏览 2提问于2018-02-01得票数 4
我有一个文件，里面有我所有的通用样式(styles.js)，比如原色、二次颜色、灰色的阴影等等。
当用户登录时，我的主颜色和第二颜色处于redux状态。
我想要的是:当这个道具在我的还原状态更新时，我需要让我的styles.js听到这个变化，并更新所有引用这个主颜色和次颜色的地方。
我做过这件事但不起作用。styles.js似乎从未更新过。
我的styles.js：
import store from 'store';
//here I check if my primaryColor is undifined, if it is, I set the default col
浏览 0提问于2018-05-03得票数 1
回答已采纳
3回答
如何在button_click事件上更改面板颜色？下面是代码片段，当我点击Clear按钮时，我想改变panel1的颜色。
private void buttClear_Click(object sender, EventArgs e)
{
txtPntX.Text = "";
txtPntY.Text = "";
txtSrtPtX.Text = "";
txtSrtPtY.Text = "";
txtEndPtX.Text = "";
t
浏览 1提问于2015-02-14得票数 0
无论我将其更改为黑色或红色，它仍然显示默认颜色为白色。 我在android上测试了它，iphone模拟器正在工作。 谁有什么建议？提前谢谢。 "react-native"："0.57.8"， <ActivityIndicator color="#0000CC" size="large" animating={true} />
浏览 20提问于2019-02-20得票数 1
1回答
我正在使用React-Native构建一个应用程序。我在FlatIcon上获取了一些自定义图标，并将它们上传到IcoMoon，然后按照安装步骤在react-native上正确地实现它们。
问题是我得到的结果与我安装的完全不同。
这是我在应用程序上得到的图标：
但我应该得到这样的结果：
CustomIcon.js
import { createIconSetFromIcoMoon } from 'react-native-vector-icons';
import icoMoonConfig from './selection.json';
e
浏览 11提问于2018-08-13得票数 1
回答已采纳
我想改变按钮的颜色。当你按下按钮时，它会显示你选择红色，蓝色，绿色，当你选择一种颜色时。此颜色将显示在第一次按下的按钮上。 我读了problem -> Click Button and change background color of another button，但我不明白。
浏览 27提问于2019-10-08得票数 0
我是一个新的react-native，我正在从服务器获取数据，并在数据的基础上更新我的UI元素，就像改变背景颜色或隐藏图像一样。为了实现这一点，我应该遵循什么方法，现在我正在尝试使用redux来实现，但不知何故无法更新redux中的特定项，因为在redux中我正在存储Json数据。我试着更新，但仍然没有运气来更新redux。
基本上，如果我从服务器自动获得任何数据，比如通知或其他数据，我想在每个屏幕上更新我的UI。
请帮助我决定更好的方法来实现这一点。
提前谢谢。
依赖关系：
"dependencies": {
"firebase": "^5.0
浏览 3提问于2019-05-14得票数 1
<Layout>
<BottomNavigation indicatorStyle={styles.tabIndicator} selectedIndex={selectIndex} onSelect={onSelect} >
<BottomNavigationTab title='Home' icon={homeIcon}/>
<BottomNavigationTab title='Cart' icon={cartIcon}/>
<BottomN
浏览 51提问于2020-03-30得票数 1
初始化新的react本机应用程序时会出现以下错误：
在未声明标识符'UITextInputPasswordRules'的'UIView *‘类型的对象上找不到属性'passwordRules’
复制步骤：
> react-native init sampleapp
> cd sampleapp
> xed ./ios
> (Click Run button)
环境详情：
react-native-cli: 2.0.1
react-native: 0.62.2
xcode: 9.4.1
macos: 10.13.4
node: 1
浏览 3提问于2020-04-17得票数 3
fontSize: 20和颜色：'red‘道具正在显示，而不是从父组件设置的fontSize: 12和颜色：’蓝色‘，但是正确显示了fontWeight：’粗体‘。
我有一个可重用的receives子组件，它从它的父组件接收一些道具，如下所示
import React from "react";
import { Text, StyleSheet } from "react-native";
const BodyText = ( props ) => {
return (
<Text style={styles.bo
浏览 0提问于2021-05-09得票数 0
我想要一个可压预置的背景颜色是蓝色或绿色的基础上的值在防火基础上，即如果它是真实的在火基，可压的颜色是绿色，否则它是蓝色的。
另外，如果我按下按钮，它就会切换火基中的值和按钮交换的颜色。
在我的代码中，当我单击可按压时，颜色会改变，值也会在firebase中被交换，但是当我加载应用程序时，它没有预先设置的颜色。
如果firebase中的值为真，则该按钮在加载时应具有颜色为绿色。
这是我的密码。
import {StatusBar} from 'expo-status-bar';
import React, {Component} from 'react';
im
浏览 14提问于2021-12-05得票数 0
我正在尝试使用react-native为android状态栏设置渐变颜色。但setBackgroundColor采用的是颜色字符串。
是否可以对状态栏颜色使用渐变颜色？
浏览 7提问于2017-08-09得票数 1
因此，如果我有一个文本"Click Me to lighter“，它的CSS颜色属性是像"#00801a”这样的深绿色十六进制颜色，我想让它变得更亮，这样当我点击它时，它会变成浅绿色。同样，如果它是某种蓝色，点击它会使它变得更浅的蓝色。基本上，我想知道是否有一种方法可以在不知道实际颜色的情况下更改css颜色。
浏览 1提问于2011-04-29得票数 6
回答已采纳
1回答
我有个简单的按钮。我想切换它的模板(或样式.)时，它是预先。
我想改变这个
<DataTemplate>
<Button Click="Button_Click"
DataContext="{Binding}"
Height="65" Width="79"
Background="Black"
Content="{Binding Path=CardWasFounded}"/>
浏览 2提问于2010-10-04得票数 0
回答已采纳
2回答
我想挑战自己，使一个蚀刻草图，基本上当我悬停在div上时，我创建了它们的颜色变化，我做了一个按钮，所以当我点击它并悬停在div上时，颜色将不同(随机rgb)从其他div(每个div不同的颜色)，我做了另一个按钮，留下一个痕迹到过去的div我悬停和一个按钮，所以当我悬停在div上时，它们都有相同的颜色。我希望其他函数在我单击按钮时停止，例如，当我单击随机颜色按钮并调用randomColor函数时，我希望trialColor和normalColor函数停止。
Jsfiddle代码
<div class="header">
<button class="bu
浏览 0提问于2015-06-30得票数 2
如何通过在expo中按下按钮来加载webview内容?我是否必须使用导航？ import * as React from 'react';
import { WebView } from 'react-native-webview';
import {View} from 'react-native'
export default function App(){
return (
<View>
<Button title={'CLICK'} onPress={()=> &l
浏览 41提问于2021-06-24得票数 0
3回答
我试图改变整个视图的背景颜色通过切换开关。但颜色并没有改变。请帮帮忙，非常感谢！
这是我的密码。
import { StyleSheet, View, Switch} from 'react-native';
import React, {useState} from 'react';
export default function App() {
const [isEnabled, setIsEnabled] = useState(false);
const toggleSwitch = () => setIsEnabled(previousState
浏览 12提问于2022-09-19得票数 0
回答已采纳
3回答
这就是问题所在。我已经在页面上放了一个锚。但是这个锚没有href属性：
<a onClick="javascript:submit(10);" onMouseOver="adjust(1)" onMouseOut="adjust(0)">Click Here</a>
这个很好用。但我想让它一直划线，我做到了：
a
{
text-decoration:underline;
}
现在，我希望Click Here有一个与默认(黑色)不同的颜色。我想，当鼠标上方的颜色改变，并返回到我设置的鼠标还没有结束。另外，我想改变背景
浏览 8提问于2011-12-14得票数 1
1回答
我试图为老年人做一个网站使用，因此我提供选项，以便他们可以改变背景颜色和字体颜色在页面上。例如，黑色的白色和白色的黑色
我已经成功地实现了jQuery。但是，当我单击其中一个选项(例如，白色上的黑色，然后要单击白色上的黑色选项)时.两者都适用。页面不会重新启动，只应用其中一种，它们重叠，两种颜色选项都适用。我不知道如何解决这个问题，所以我想知道是否有人能帮助我。
HTML：
<a href="#" id="Col">Col</a>
<a href="#" id="Color">Color<
浏览 4提问于2015-02-22得票数 0
回答已采纳
我的podfile将静态库与node_modules上的reactnative以及第三方podspecs(如Folly.podspec、glog.podspec、DoubleConversion.podspec和动态快速库)联系在一起。
当我试图超越projet时，我发现了第三方podspecs双转换/双转换.h‘文件的错误。
这是我的文件：
platform :ios, '10.0'
require_relative '../node_modules/@react-native-community/cli-platform-ios/native_module
浏览 11提问于2020-10-12得票数 1
回答已采纳
1回答
如何使用RN中的函数？
我想找到以下图像的确切位置和尺寸：
import React, { Component } from 'react';
import { StyleSheet, Image, View } from 'react-native';
class TestView extends Component {
measureWelcome() {
this.refs.welcome.measure(this.logWelcomeLayout);
}
logWelcomeLayout(ox, oy, width, hei
浏览 0提问于2018-04-23得票数 0
回答已采纳
我试图在第二次单击时更改SVG上的填充颜色，目前，可以在第一次单击时添加填充颜色，但我希望在第二次单击时将颜色更改/重置为默认颜色；这是我的当前代码：
jQuery('#color-my-svg').on("click", function() {
if(!jQuery(this)[0].hasAttribute('style')){
jQuery('#color-my-svg').css({ fill: "#ff0000" });
}
else{
jQuery(this).remove
浏览 4提问于2019-09-29得票数 1
回答已采纳
1回答
如何从react Native.调用在本地主机上运行的api .我正在使用expo cli并使用expo app在真实设备上运行应用程序.我尝试了fetch(“”)，但这不起作用，请帮助！
网络错误在node_modules\axios\lib\core\createError.js:16:14在node_modules\event-target-shim\dist\event-target-shim.js:818:20在node_modules\react-native\Libraries\Network\XMLHttpRequest.js:600:10在node_modules\react
浏览 1提问于2021-05-06得票数 0
我有一个代码，这将弹出并关闭弹出窗口与它的一个小动画。当我向弹出窗口的背景添加颜色时，问题就出现了。因为当关闭弹出窗口并且背景颜色发生更改时，无法单击屏幕。
我想过去掉背景，但我不知道该怎么做。我认为将backgroundColor设置为透明可以解决我的问题。但它只会删除之前的颜色，并使屏幕不可点击。
之前我尝试使用if else来关闭背景，但应用程序上的动画甚至不再起作用。
下面是我附加的代码：
import React, { useState, useRef } from 'react';
import { Text, View, TouchableHighlight, T
浏览 1提问于2020-06-05得票数 1
1回答
反应本色问题
、、
我对我的应用程序的颜色有问题，当我在android中更改包名时，问题就会发生。
，这是我没有更改包名时的原始颜色
当包名更改后的
我使用./gradlew clean清理gradle，使用react-native start --reset-cache清除缓存，但颜色仍然与原始颜色不一样。你知道这是怎么发生的吗？谢谢。
浏览 3提问于2020-12-03得票数 0
1回答
我尝试创建一个新的React-Native项目，并包含一个Navigator。但这会导致错误。
import React from 'react';
import {
SafeAreaView,
StyleSheet,
ScrollView,
View,
Text,
StatusBar, Navigator, TouchableHighlight
} from 'react-native';
const App: () => React$Node = () => {
return (
<>
浏览 5提问于2019-10-25得票数 1
小提琴：
在检查输入时，如何使每个item_ k上的文本更改颜色( toggleClass() )？
$('item_').each(function(){
$(".iOScb").click(function(){
$('item_ k').toggleClass("active");
});
});
不要工作。
浏览 1提问于2016-06-20得票数 0
回答已采纳
2回答
所以我使用的是React本机，而且我的大部分页面都有问题，我似乎无法将所有元素的整个背景色更改为统一的颜色。即：
import React, { Component } from "react";
import { View, Text, FlatList, ActivityIndicator } from "react-native";
import { List, ListItem, SearchBar } from "react-native-elements";
class Animals extends Component {
浏览 3提问于2018-06-12得票数 1
回答已采纳
1回答
反应自然的动态颜色
、、、
我是新来的反应本地人。我想在选择的基础上创建我的应用程序的动态颜色。
/**
* Sample React Native App
* https://github.com/facebook/react-native
* @flow
*/
import React, {
AppRegistry,
Component,
StyleSheet,
Text,
Image,
NavigatorIOS,
AlertIOS,
ListView,
ScrollView,
TouchableHighlight,
Vi
浏览 3提问于2016-05-05得票数 2
回答已采纳
我基本上想要插入一个带有react@15.6.0和react-本机@0.45.0的react-原生项目，因为依赖问题。然而，react-本机命令只允许我指定react-本机版本：
react-native init sample --version react-native@0.45.0
此命令不起作用：
react-native init diskful --version react-native@0.45.0 --version react@15.6.0
这也是：
react-native init diskful --version react-native@0.45.0 react@
浏览 4提问于2017-07-07得票数 11
回答已采纳
我正在用typescript构建一个react-native应用程序，以便学习react native。一旦我用expo start运行应用程序，并尝试在模拟器上运行，我得到了这个错误：
index.js: [BABEL] ......../index.js: Unknown option: .name. Check out https://babeljs.io/docs/en/babel-core/#options for more information about options
实际上我以前没有这个错误。我尝试安装react-native-dotenv包，同时也安装了metro-rea
浏览 1提问于2020-10-06得票数 12
回答已采纳
5回答
我在react-native中创建了一个应用程序。我需要的包名是: com.org.appname
React-native不允许您将其指定为init中的包名，也不允许您在init之后更改它。
react-native init --package="com.org.appname"
不工作
按照中的说明更改包名称也不起作用，并在react-native run-android上导致以下错误
无法完成会话: INSTALL_FAILED_VERSION_DOWNGRADE
浏览 2提问于2017-04-08得票数 7
我的应用程序没有颜色从凹槽左右，当使用iPhone水平和当我刷新网站(向下移动，然后没有颜色在肚脐上)。
我试着用
有人知道如何使区域周围的凹槽与肚脐相同的颜色，为什么SafeAreaView不为我工作？
import { SafeAreaView } from 'react-native';
function App() {
return (
<SafeAreaView>
<Router>
<ScrollToTop />
<Header />
<P
浏览 2提问于2022-09-19得票数 0
1回答
覆盖引导表选中的行背景色。
、、、、
我正在使用jQuery引导表插件，我需要更改选中行的颜色，并在未选中时恢复原始颜色。这个小提琴展示了当事件是点击时如何做到这一点。我尝试在check事件上实现这个想法，但是选中的行不会在设置的颜色中高亮显示。这是我的小提琴，如何使更改发生在已检查的行上，并在未检查的情况下进行逆转？
HTML：
<table id="table" data-toggle="table"
data-url="/gh/get/response.json/wenzhixin/bootstrap-table/tree/master/docs/data/data
浏览 2提问于2016-10-13得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM活动推荐
腾讯云开发者
