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

Aber keine Ausgabe: Screenshot meines Handys: -

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

Ich hatte ein Problem mit dem Rand und dem Auffüllen mit einem Button. Ich habe Button in eine ViewKomponente eingefügt und Ihre Eigenschaften auf die angewendet 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>

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>

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

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 >

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

Probier diese

<TouchableOpacity onPress={() => this._onPressAppoimentButton()} style={styles.Btn}>
    <Button title="Order Online" style={styles.Btn} > </Button>
</TouchableOpacity>

Wir können buttonStylejetzt Requisiten verwenden.
https://react-native-training.github.io/react-native-elements/docs/button.html#buttonstyle

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.