如何更改反应原生按钮的背景颜色

我想改变我的按钮的背景颜色，但似乎没有工作，我试着提出的属性，也许我错误地使用它。你们有没有任何想法？如何更改反应原生按钮的背景颜色

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

});

来源

2017-06-28 Mamadou Coulibaly

你应该接受一个答案给别人你觉得回答了你的问题的最佳。 –

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

来源

2017-06-28 09:24:05

我补充说，它仍然不能正常工作 –

“color”属性仅适用于背景，如果您正在为android构建。

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

来源

2017-06-28 10:37:16 Medardas

我如何真正创建一个新组件，我是新来的，以回应本地大声笑。 –

=]]你真的在你的问题中显示一个组件：导出默认类应用程序扩展React.Component {} 应用程序是一个组件，你可以通过在任何其他文件的顶部添加这样的行来导入它：从“/ location/to/App/component”导入 – Medardas

用这个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.submitText}>Login</Text> 
</TouchableOpacity>

对于Android的它仅仅只用按钮颜色属性的工作原理：

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

来源

2017-10-12 10:44:18

我建议使用React Native Elements包，它允许插入风格throught buttonStyle财产。

风格：

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

渲染（）

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

影响：

来源

2018-01-25 15:16:29 bodolsog

如何更改反应原生按钮的背景颜色

回答

相关问题