如何更改反应本机按钮的背景颜色答案

【问题标题】：How to change background color of react native button如何更改反应本机按钮的背景颜色
【发布时间】：2017-12-01 13:53:00
【问题描述】：

我正在尝试更改按钮的背景颜色，但似乎没有任何效果，我尝试了 raise 属性，也许我使用不正确。你们有什么想法吗？

 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',
  },

});

【问题讨论】：

您应该接受您认为最能回答您问题的人的回答。
@Dan，截至目前，没有人提供有效的答案。

标签： javascript reactjs button react-native

【解决方案1】：

您应该使用十六进制代码backgroundColor="#FF0000" 而不是color="red"。也请使用raised={true} 其他明智的背景颜色不会被覆盖。

【讨论】：

这不适用于 react-native 组件。它不提供这些道具。
它对我有用，而其他所有都没有，但有一个更正它不需要 raise={true}

【解决方案2】：

"color" 属性仅在您为 android 构建时适用于背景。

除此之外，我个人认为管理自定义按钮更容易。那就是创建您自己的名为 button 的组件，并将其作为带有文本的视图。这种方式更易于管理，您可以像 Button 一样简单地导入它。

【讨论】：

我如何实际创建一个新组件，我是新手反应原生lol。
=]] 您实际上在问题中显示了一个组件：export default class App extends React.Component {} App 是一个组件，您可以通过在顶部添加这样的行来导入它任何其他文件：从“/location/to/App/component”导入

【解决方案3】：

使用它为 iOS 中的按钮添加背景颜色：

样式：

  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
  }

按钮：

<TouchableOpacity
          style={styles.loginScreenButton}
          onPress={() => navigate('HomeScreen')}
          underlayColor='#fff'>
          <Text style={styles.loginText}>Login</Text>
 </TouchableOpacity>

对于 Android，它仅适用于 Button color 属性：

<Button  onPress={onPressAction}  title="Login"  color="#1E6738"  accessibilityLabel="Learn more about this button" />

【讨论】：

你回答的哪一部分改变了背景颜色？我是否需要与您拥有相同的边距才能使其发挥作用？

【解决方案4】：

我建议使用React Native Elements 包，它允许通过buttonStyle 属性插入样式。

样式：

const styles = StyleSheet.create({
   container: {
      flex: 1
   },
   button: {
      backgroundColor: '#00aeef',
      borderColor: 'red',
      borderWidth: 5,
      borderRadius: 15       
   }
})

渲染（）

render() {
   return (
      <View style={styles.container}>
          <Button
             buttonStyle={styles.button}
             title="Example"
             onPress={() => {}}/>
      </View>
   )
}

效果：

世博小吃：https://snack.expo.io/Bk3zI0u0G

【讨论】：

它在 ios 中不起作用，请您检查并建议我。
我不知道为什么我花了 4 到 8 个小时的间歇性谷歌搜索超过 2 天，才终于有人告诉我如何编辑按钮。我找到了buttonStyle，但似乎没人愿意提及您必须使用 "React Native Elements" 包中的 Button 组件才能使用 buttonStyle。谢谢

【解决方案5】：

这个答案有点晚了，但对其他人有好处。为了解决这个问题，最好使用“文本”组件作为按钮

先把组件命名为AppButton

function AppButton({children,style,onPress}) {
 return (
   <TouchableOpacity onPress={onPress}>
    <Text
      style={[styles.appButton,style]} >
      {children}
    </Text>
   </TouchableOpacity>
 );
}

export default AppButton;

然后将其导入您要使用的位置

import AppButton from './AppButton';

通过这一行，您可以调用您的自定义按钮，它实际上是一个您可以自定义它的文本。记住 onPress 事件必须调用 TouchableOpacity 而不是 Text：

<AppButton style={styles.appOk} onPress={()=> visibleFunc(false)} >Ok</AppButton>

【讨论】：