更改按钮颜色反应原生

Question

我想简单地改变按钮的颜色,但我不能.我试图直接在按钮中更改,并将样式传递给它.但他们都没有奏效.这是我非常简单的代码.

 export default class Dots extends Component {
  render() {
    return (
      <Image style={styles.container}  source={require('./background3.png')}>
      <Button title='play' style = {{color:'red'}}/>
      </Image>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex:1,
    backgroundColor:'transparent',
    resizeMode:'cover',
    justifyContent:'center',
    alignItems:'center',
    width:null,
    height:null
  },

  button:{
  backgroundColor:'#ff5c5c',
  }

}); 

Answer 1

react Button组件在其使用的每个平台上呈现本机按钮.因此,它不响应style道具.它有自己的一套道具.

使用它的正确方法是

<Button color="#ff5c5c" title="I'm a button!" />

您可以在https://facebook.github.io/react-native/docs/button.html上查看文档.

现在,假设您确实想制作超级自定义按钮,因此您必须使用视图和可触摸的不透明度.有点像这样的东西.

<TouchableOpacity onPress={...}>
  {... button markup}
</TouchableOpacity>

您将把它包装在您自己的按钮组件中并使用它.

Answer 2

我认为使用 TouchableOpacity 而不是 Button 标签肯定更好，因为 Button 在 Android 和 iOS 平台上造成样式差异。

您可以使用下面的代码，它看起来非常类似于一个按钮，它的作用就像一个：

 <TouchableOpacity
         style={styles.button}
         onPress={this.onPress}
       >
         <Text> Touch Here </Text>
 </TouchableOpacity>

const styles = StyleSheet.create({
  button: {
    alignItems: 'center',
    backgroundColor: '#DDDDDD',
    padding: 10
  }
})