更改按钮颜色反应本机

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 安装 react-native-elements npm i react-native-linear-gradient npm i 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"/>

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

更改按钮颜色反应本机

change button color react native

native

reactjs