Javascript 如何更改本机按钮的背景颜色
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/44798426/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to change background color of react native button
提问by Mamadou Coulibaly
I am trying to change the background color of my button but nothing seems to work, I tried the raised property, maybe i am using it incorrectly. Do any of you have any ideas?
我正在尝试更改按钮的背景颜色，但似乎没有任何效果，我尝试了凸起的属性，也许我使用不正确。你们有什么想法吗？
import React from 'react';
import { StyleSheet, Text, View, Button, TouchableHighlight } from 'react-native';
export default class App extends React.Component {
state={
name: "Mamadou"
};
myPress = () => {
this.setState({
name: "Coulibaly"
});
};
render() {
return (
<View style={styles.container}>
<Button
title={this.state.name}
color="red"
onPress={this.myPress}
/>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});
回答by Harjot Singh
Use this for adding the background color to the button in iOS:
使用它为 iOS 中的按钮添加背景颜色：
Styles:
样式:
loginScreenButton:{
marginRight:40,
marginLeft:40,
marginTop:10,
paddingTop:10,
paddingBottom:10,
backgroundColor:'#1E6738',
borderRadius:10,
borderWidth: 1,
borderColor: '#fff'
},
loginText:{
color:'#fff',
textAlign:'center',
paddingLeft : 10,
paddingRight : 10
}
Button:
按钮：
<TouchableOpacity
style={styles.loginScreenButton}
onPress={() => navigate('HomeScreen')}
underlayColor='#fff'>
<Text style={styles.loginText}>Login</Text>
</TouchableOpacity>
For Android it simply works with Button color property only:
对于 Android，它仅适用于 Button color 属性：
<Button onPress={onPressAction} title="Login" color="#1E6738" accessibilityLabel="Learn more about this button" />
回答by bodolsog
I suggest to use React Native Elementspackage, which allow to insert styles throught buttonStyleproperty.
我建议使用React Native Elements包，它允许通过buttonStyle属性插入样式。
styles:
样式：
const styles = StyleSheet.create({
container: {
flex: 1
},
button: {
backgroundColor: '#00aeef',
borderColor: 'red',
borderWidth: 5,
borderRadius: 15
}
})
render()
使成为（）
render() {
return (
<View style={styles.container}>
<Button
buttonStyle={styles.button}
title="Example"
onPress={() => {}}/>
</View>
)
}
Effect:
效果：
Expo Snack: https://snack.expo.io/Bk3zI0u0G
回答by Medardas
"color" property applies to background only if you're building for android.
“颜色”属性仅在您为 android 构建时才适用于背景。
Other than that I personally find it easier to manage custom buttons. That is create your own component named button and have it as a view with text. This way its way more manageable and you can import it as easy as Button.
除此之外，我个人觉得管理自定义按钮更容易。即创建您自己的名为 button 的组件并将其作为带有文本的视图。这种方式更易于管理，您可以像 Button 一样轻松导入它。
回答by Sourav De
You should use the hex code backgroundColor="#FF0000"instead of color="red". Also please use raised={true}other wise background color is not override.
您应该使用十六进制代码backgroundColor="#FF0000"而不是color="red". 另外请使用raised={true}其他明智的背景颜色不被覆盖。
