Import_this
import {AppRegistry, Text, View, Button, StyleSheet} from 'react-native';
Dies ist mein React Button Code Aber Stil funktioniert nicht Hase ...
<Button
onPress={this.onPress.bind(this)}
title={"Go Back"}
style={{color: 'red', marginTop: 10, padding: 10}}
/>
Auch ich wurde von diesem Code versucht
<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 wurde auf diese Weise versucht ..
<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'
}
});
reactjs
react-native
jsx
react-native-button
JavaScript-Lerner
quelle
quelle
Button
Verwenden Sie eine benutzerdefinierte Komponente oder eine Reaktionsknopfkomponente?style
Eigentum. Bitte einmal überprüfen.Antworten:
Die Schaltfläche "Native reagieren" ist in Ihren Möglichkeiten sehr eingeschränkt. Taste
Es hat keine Stil-Requisite , und Sie legen den Text nicht wie im Web fest,
<Button>txt</Button>
sondern über die title-Eigenschaft<Button title="txt" />
Wenn Sie mehr Kontrolle über das Erscheinungsbild haben möchten, sollten Sie eine der TouchableXXXX-Komponenten wie TouchableOpacity verwenden. Sie sind wirklich einfach zu bedienen :-)
quelle
Ich hatte ein Problem mit dem Rand und dem Auffüllen mit einem
Button
. Ich habe Button in eineView
Komponente eingefügt und Ihre Eigenschaften auf die angewendetView
.<View style={{margin:10}}> <Button title="Decrypt Data" color="orange" accessibilityLabel="Tap to Decrypt Data" onPress={() => { Alert.alert('You tapped the Decrypt button!'); }} /> </View>
quelle
Wenn Sie keine eigene Schaltflächenkomponente erstellen möchten, können Sie die Schaltfläche schnell und unkompliziert in eine Ansicht einbinden, sodass Sie zumindest das Layout-Styling anwenden können.
Dies würde beispielsweise 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>
quelle
React Native-Schaltflächen sind in ihrer Option sehr eingeschränkt. Sie können TouchableHighlight oder TouchableOpacity verwenden, indem Sie dieses Element formatieren und Ihre Schaltflächen so damit umschließen
<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>
Sie können die React-Bibliothek auch für benutzerdefinierte Schaltflächen verwenden. Eine nette Bibliothek ist die React-Native-Schaltfläche ( https://www.npmjs.com/package/react-native-button ).
quelle
Anstatt die Schaltfläche zu verwenden. Sie können Text verwenden, um nativ zu reagieren und dann berührbar zu machen
<TouchableOpacity onPress={this._onPressButton}> <Text style = {'your custome style'}> button name </Text> </TouchableOpacity >
quelle
Wenn Sie nur mich selbst lernen, aber in eine Ansicht einschließen, können Sie möglicherweise 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> ) }) } })
quelle
Probier diese
<TouchableOpacity onPress={() => this._onPressAppoimentButton()} style={styles.Btn}> <Button title="Order Online" style={styles.Btn} > </Button> </TouchableOpacity>
quelle
Wir können
buttonStyle
jetzt Requisiten verwenden.https://react-native-training.github.io/react-native-elements/docs/button.html#buttonstyle
quelle
Ich weiß, dass dies ein Nekro-Posting ist, aber ich habe eine wirklich einfache Möglichkeit gefunden, den oberen Rand und den unteren Rand der Schaltfläche selbst hinzuzufügen, ohne etwas anderes erstellen zu müssen.
Wenn Sie die Stile inline oder durch Erstellen eines zu übergebenden Objekts erstellen, können Sie Folgendes tun:
var buttonStyle = { marginTop: "1px", marginBottom: "1px" }
Es scheint, dass das Hinzufügen der Anführungszeichen um den Wert funktioniert. Ich weiß nicht, ob dies daran liegt, dass es sich um eine spätere Version von React handelt, die vor zwei Jahren veröffentlicht wurde, aber ich weiß, dass sie jetzt funktioniert.
quelle