Le style de bouton React-Native ne fonctionne pas

Question

Importer_this

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

C'est le code de mon bouton React mais le style ne fonctionne pas Hare ...

<Button
  onPress={this.onPress.bind(this)} 
  title={"Go Back"}
  style={{color: 'red', marginTop: 10, padding: 10}}
/>

J'ai aussi essayé avec ce code

<Button 
       containerStyle={{padding:10, height:45, overflow:'hidden', 
       borderRadius:4, backgroundColor: 'white'}}
       style={{fontSize: 20, color: 'green'}} 
       onPress={this.onPress.bind(this)} title={"Go Back"}
      > Press me!
</Button>

Question de mise à jour :

Aussi, j'ai été essayé par cette façon

<Button
    onPress={this.onPress.bind(this)}
    title={"Go Back"}
    style={styles.buttonStyle}
>ku ka</Button>

Style

const styles = StyleSheet.create({
    buttonStyle: {
        color: 'red',
        marginTop: 20,
        padding: 20,
        backgroundColor: 'green'
    }
});

Mais pas de résultat : Capture d'écran de mon téléphone :-

Answer 1

El Bouton React Native est très limité dans ce que vous pouvez faire, vous voyez ; Bouton

Il ne dispose pas d'un accessoire de style et vous ne définissez pas le texte de la manière "web" comme <Button>txt</Button> mais via la propriété du titre <Button title="txt" />

Si vous voulez avoir plus de contrôle sur l'apparence, vous devriez utiliser un des composants TouchableXXXX' comme TouchableOpacity Ils sont très faciles à utiliser :-)

Answer 2

J'ai eu un problème avec la marge et le rembourrage avec une Button . J'ai ajouté un bouton à l'intérieur d'un View et appliquez vos propriétés au composant View .

<View style={{margin:10}}>
<Button
  title="Decrypt Data"
  color="orange"
  accessibilityLabel="Tap to Decrypt Data"
  onPress={() => {
    Alert.alert('You tapped the Decrypt button!');
  }}
  />  
</View>

Answer 3

Les boutons React Native sont très limités dans les options qu'ils offrent. Vous pouvez utiliser TouchableHighlight ou TouchableOpacity en stylisant ces éléments et en les intégrant à vos boutons comme suit

             <TouchableHighlight 
                style ={{
                    height: 40,
                    width:160,
                    borderRadius:10,
                    backgroundColor : "yellow",
                    marginLeft :50,
                    marginRight:50,
                    marginTop :20
                }}>
            <Button onPress={this._onPressButton}            
            title="SAVE"
            accessibilityLabel="Learn more about this button"
          /> 
          </TouchableHighlight> 

Vous pouvez également utiliser la bibliothèque react pour personnaliser le bouton, notamment la bibliothèque react-native-button ( https://www.npmjs.com/package/react-native-button )

Answer 4

Si vous ne souhaitez pas créer votre propre composant de bouton, une solution simple et rapide consiste à envelopper le bouton dans une vue, ce qui vous permet au moins d'appliquer un style de mise en page.

Par exemple, cela permettrait de créer une rangée de boutons :

<View style={{flexDirection: 'row'}}>
    <View style={{flex:1 , marginRight:10}} >
        <Button title="Save" onPress={() => {}}></Button>
    </View>
    <View style={{flex:1}} >
        <Button title="Cancel" onPress={() => {}}></Button>
    </View>
</View>

Answer 5

Je ne fais qu'apprendre, mais l'intégration dans une vue peut vous permettre d'ajouter des styles autour du bouton.

const Stack = StackNavigator({
  Home: {
    screen: HomeView,
    navigationOptions: {
      title: 'Home View'
    }
  },
  CoolView: {
    screen: CoolView,
    navigationOptions: ({navigation}) => ({
      title: 'Cool View',
      headerRight: (<View style={{marginRight: 16}}><Button
        title="Cool"
        onPress={() => alert('cool')}
      /></View>
    )
    })
  }
})