web-dev-qa-db-fra.com

changer la couleur du bouton réagir natif

Je veux simplement changer la couleur du bouton, mais je ne peux pas. J'ai essayé de changer directement dans le bouton, et de lui passer un style. Mais aucun d'eux n'a fonctionné. Voici mon code très simple.

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

});
reactjsnative
18
Gisa

Le composant react Button rend le bouton natif sur chaque plate-forme qu'il utilise. Pour cette raison, il ne répond pas à la propriété style. Il a son propre ensemble d'accessoires.

La bonne façon de l'utiliser aurait été

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

Vous pouvez voir la documentation sur https://facebook.github.io/react-native/docs/button.html

Maintenant, disons que vous voulez créer un bouton super personnalisable, pour cela, vous devrez utiliser des vues et une opacité tactile. Quelque chose dans le sens de cela.

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

Vous allez envelopper cela dans votre propre composant de bouton et l'utiliser.

26
Kevin Velasco

Je pense qu'il est certainement préférable d'utiliser TouchableOpacity au lieu de la balise Button car Button crée des différences de style dans les plates-formes Android et iOS.

Vous pouvez utiliser le code ci-dessous et il ressemble beaucoup à un bouton et il agit comme tel:

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

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