The Bereaksi Asli Tombol sangat terbatas dalam apa yang dapat anda lakukan, melihat; Tombol

Tidak memiliki gaya prop, dan anda don't mengatur teks "web-cara" sepertitxttetapi melalui judul property`

Jika anda ingin memiliki lebih banyak kontrol atas tampilan anda harus menggunakan salah satu dari TouchableXXXX' komponen seperti TouchableOpacity Mereka benar-benar mudah untuk menggunakan :-)

Aku punya masalah dengan margin dan padding dengan Tombol. Saya menambahkan Tombol di dalam Melihat komponen dan menerapkan sifat anda untuk Melihat.

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

Jika anda tidak ingin untuk membuat tombol anda sendiri komponen, cepat dan kotor adalah solusi untuk membungkus tombol view, yang memungkinkan anda untuk setidaknya menerapkan tata letak styling.

Untuk contoh ini akan membuat baris dari tombol:

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

Bereaksi Asli-tombol yang sangat terbatas dalam pilihan yang mereka berikan.Anda dapat menggunakan TouchableHighlight atau TouchableOpacity oleh styling ini elemen dan membungkus anda dengan tombol seperti ini

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

Anda juga dapat menggunakan bereaksi perpustakaan untuk tombol khusus .Salah satu perpustakaan yang bagus adalah bereaksi-asli-tombol (https://www.npmjs.com/package/react-native-button)

Hanya belajar sendiri, tapi pembungkus di View memungkinkan anda untuk menambahkan gaya di sekitar tombol.

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

Alih-alih menggunakan tombol . anda dapat menggunakan Teks dalam bereaksi asli dan kemudian membuat di terjamah

<TouchableOpacity onPress={this._onPressButton}> 
   <Text style = {'your custome style'}>
       button name
   </Text>
</TouchableOpacity >

Coba yang satu Ini

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

Kita dapat menggunakan buttonStyle prop sekarang.
https://react-native-training.github.io/react-native-elements/docs/button.html#buttonstyle

Saya tahu ini adalah necro-posting, tapi saya menemukan cara lain yang mudah untuk hanya menambahkan margin-top dan margin-bottom untuk tombol itu sendiri tanpa harus membangun apa-apa lagi.

Ketika anda membuat gaya, apakah inline atau dengan membuat sebuah objek untuk lulus, anda dapat melakukan ini:

var buttonStyle = {
   marginTop: "1px",
   marginBottom: "1px"
}

Tampaknya bahwa menambahkan tanda kutip nilai membuatnya bekerja. Saya don't tahu apakah ini karena itu's versi Bereaksi terhadap apa yang telah diposting dua tahun yang lalu, tapi saya tahu bahwa ia bekerja sekarang.