Reagieren Native Button-Stil arbeiten nicht

Question

Import_this

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

Dieser Knopf Code reagieren meine Aber Stil nicht Hare arbeiten ...

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

Auch ich war von diesem Code versuchen

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

Update-Frage:

Auch ich war auf diese Weise versuchen ..

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

Stil

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

aber keine löscht: Screenshots von meinem Handy: -

Answer 1

Scheinen, wie du verwendest native-Base-Bibliothek. Der Code scheint mir gut zu sein. Kannst du bitte auch den Style der View senden?

Auch, was ist das Problem hier? Können Sie die Schaltflächen überhaupt nicht sehen oder können Sie die binded Action hier nicht aufrufen?

Answer 2

Die React Native Button ist sehr begrenzt in dem, was Sie tun können, zu sehen; Button

Es hat keinen Stil prop, und Sie nicht Text der „Web-way“ wie <Button>txt</Button> aber über den Titel Eigenschaft <Button title="txt" />

Wenn Sie mehr Kontrolle über das Aussehen eingestellt haben wollen Sie sollten eine der TouchableXXXX 'Komponenten wie TouchableOpacity verwenden. Sie sind wirklich einfach zu bedienen :-)

Answer 3

Nur lernen, selbst, aber das Wrapping in einer Ansicht können Sie Stile um die Schaltfläche hinzufügen.

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

Answer 4

Wenn Sie nicht über Ihre eigene Button-Komponente, eine schnelle und schmutzige Lösung zu schaffen, ist die Schaltfläche in einer Ansicht zu setzen, das Sie Layout ermöglicht Styling mindestens anzuwenden.

Zum Beispiel würde dies eine Reihe von Schaltflächen erstellen:

<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

Ich hatte ein Problem mit Marge und Polsterung mit einem Button. Ich habe Button innerhalb einer View Komponente hinzugefügt und Ihre Eigenschaften auf die View angewendet.

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