问题 更改按钮颜色反应原生


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

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

}); 

7528
2018-01-20 01:09


起源



答案:


反应 Button 组件在其使用的每个平台上呈现本机按钮。因此,它没有回应 style 支柱。它拥有自己的一套道具。

使用它的正确方法是

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

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

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

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

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


15
2018-01-20 01:22



color ='#ff5c5c'改变android中的背景颜色。如何更改文本颜色和字体大小? - Amir Shabani
这里有一个问题。 Android采用“color =”并使其成为按钮背景颜色(覆盖样式表中的backgroundColor:)。同时,iOS采用“color =”并使其成为文本颜色,并在样式表中适当地使用背景颜色。这使得单个代码集正确处理所有按钮变得非常困难。 - David Urry


答案:


反应 Button 组件在其使用的每个平台上呈现本机按钮。因此,它没有回应 style 支柱。它拥有自己的一套道具。

使用它的正确方法是

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

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

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

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

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


15
2018-01-20 01:22



color ='#ff5c5c'改变android中的背景颜色。如何更改文本颜色和字体大小? - Amir Shabani
这里有一个问题。 Android采用“color =”并使其成为按钮背景颜色(覆盖样式表中的backgroundColor:)。同时,iOS采用“color =”并使其成为文本颜色,并在样式表中适当地使用背景颜色。这使得单个代码集正确处理所有按钮变得非常困难。 - David Urry