import {AppRegistry, Text, View, Button, StyleSheet} from 'react-native';
Dies ist mein React Button Code Aber Stil nicht funktioniert Hare ...
<Button
onPress={this.onPress.bind(this)}
title={"Go Back"}
style={{color: 'red', marginTop: 10, padding: 10}}
/>
Auch ich habe versucht, durch diesen 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>
Auch ich wurde von This way..
<Button
onPress={this.onPress.bind(this)}
title={"Go Back"}
style={styles.buttonStyle}
>ku ka</Button>
const styles = StyleSheet.create({
buttonStyle: {
color: 'red',
marginTop: 20,
padding: 20,
backgroundColor: 'green'
}
});
Der React Native Button ist in seinen Möglichkeiten sehr eingeschränkt, siehe: Button
Er hat keine style prop, und man setzt den Text nicht auf dem "Web-Weg" wie <Button>txt</Button>
, sondern über die title Eigenschaft <Button title="txt" />
Wenn Sie mehr Kontrolle über das Aussehen haben wollen, sollten Sie eine der TouchableXXXX' Komponenten wie TouchableOpacity verwenden. Sie sind wirklich einfach zu benutzen :-)
Wenn Sie keine eigene Schaltflächenkomponente erstellen möchten, besteht eine schnelle und schmutzige Lösung darin, die Schaltfläche in eine Ansicht zu verpacken, die Ihnen zumindest die Anwendung von Layout-Styling ermöglicht.
Dies würde zum Beispiel eine Reihe von Schaltflächen erzeugen:
<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>
Ich lerne nur, aber das Einbinden in eine Ansicht kann es Ihnen ermöglichen, Stile um die Schaltfläche herum hinzuzufü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>
)
})
}
})