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
  }
})

Answer 3

“是”按钮不响应样式。但是替代解决方案是我们可以使用react-native-element组件。

首先安装下面提到的软件包

npm install react-native-elements npm我反应本机线性梯度 npm我react-native-vector-icons

然后将包导入到您的代码中

    import { Button } from 'react-native-elements';
    import LinearGradient from 'react-native-linear-gradient';
    import Icon from 'react-native-vector-icons/FontAwesome';

    <Button ViewComponent={LinearGradient} // Don't forget this!
    linearGradientProps={{
    colors: ['#ffffff','blue', 'grey'],
    start: { x: 0, y: 0.5 },
    end: { x: 1, y: 0.5 },
    }} onPress={()=> this.props.navigation.navigate('First')} title="Click me"/>

有关更多信息，请参见以下链接：https://react-native-elements.github.io/react-native-elements/docs/button.html

更改按钮颜色反应原生

3 个答案: