更改按钮颜色反应原生 [英] change button color react native

问题描述

我只想更改按钮的颜色，但我不能.我试图直接在按钮中进行更改，并将样式传递给它.但他们都没有工作.这是我的非常简单的代码.

I want to simply change the color of the button, but i can't. I tried to change directly in the button, and pass a style to it. But neither of them worked. Here's my very simple code.

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

}); 

推荐答案

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

The react Button component renders the native button on each platform it uses. Because of this, it does not respond to the style prop. It has its own set of props.

正确的使用方法是

<Button color="#ff5c5c" title="我是一个按钮！"/>

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

现在，假设您确实想要制作超级可自定义的按钮，为此您必须使用视图和可触摸的不透明度.类似的东西.

Now, say you do want to make super customizable button, for that you'll have to use views and touchable opacity. Something along the lines of this.

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

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

You'll wrap that up in your own button component and use it.

这篇关于更改按钮颜色反应原生的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！