web-dev-qa-db-fra.com

Comment changer la couleur de fond du bouton de réaction natif

J'essaie de changer la couleur d'arrière-plan de mon bouton mais rien ne semble fonctionner, j'ai essayé la propriété élevée, peut-être que je ne l'utilise pas correctement. Est-ce que certains d'entre vous ont des idées?

 import React from 'react';
 import { StyleSheet, Text, View, Button, TouchableHighlight } from 'react-native';

export default class App extends React.Component {
state={
  name: "Mamadou"
};

myPress = () => {
  this.setState({
    name: "Coulibaly"
  });
};

  render() {
    return (
      <View style={styles.container}>

          <Button       
          title={this.state.name}
          color="red"
          onPress={this.myPress}
        />   

      </View>

    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },

});
javascriptreactjsbuttonreact-native
17
Mamadou Coulibaly

Utilisez cette option pour ajouter la couleur d'arrière-plan au bouton dans iOS:

Styles :

  loginScreenButton:{
    marginRight:40,
    marginLeft:40,
   marginTop:10,
    paddingTop:10,
    paddingBottom:10,
    backgroundColor:'#1E6738',
    borderRadius:10,
    borderWidth: 1,
    borderColor: '#fff'
  },
  loginText:{
      color:'#fff',
      textAlign:'center',
      paddingLeft : 10,
      paddingRight : 10
  }

Bouton: 

<TouchableOpacity
          style={styles.loginScreenButton}
          onPress={() => navigate('HomeScreen')}
          underlayColor='#fff'>
          <Text style={styles.loginText}>Login</Text>
 </TouchableOpacity>

enter image description here

Pour Android, cela fonctionne simplement avec la propriété Button color:

<Button  onPress={onPressAction}  title="Login"  color="#1E6738"  accessibilityLabel="Learn more about this button" />
27
Harjot Singh

Je suggère d'utiliser le package React Native Elements , qui permet d'insérer des styles dans la propriété buttonStyle.

styles :

const styles = StyleSheet.create({
   container: {
      flex: 1
   },
   button: {
      backgroundColor: '#00aeef',
      borderColor: 'red',
      borderWidth: 5,
      borderRadius: 15       
   }
})

render () 

render() {
   return (
      <View style={styles.container}>
          <Button
             buttonStyle={styles.button}
             title="Example"
             onPress={() => {}}/>
      </View>
   )
}

Effet : Effect button

Expo Snack: https://snack.expo.io/Bk3zI0u0G

7
bodolsog

La propriété "couleur" s'applique à l'arrière-plan uniquement si vous construisez pour Android.

Autre que cela, je trouve personnellement plus facile de gérer les boutons personnalisés. C’est-à-dire, créez votre propre composant nommé bouton et affichez-le sous forme de texte. De cette façon, sa gestion est plus simple et vous pouvez l’importer aussi facilement que Button.

1
Medardas