import {AppRegistry, Text, View, Button, StyleSheet} from 'react-native';
Ini saya Bereaksi kode Tombol Tapi gaya tidak bekerja Kelinci ...
<Button
onPress={this.onPress.bind(this)}
title={"Go Back"}
style={{color: 'red', marginTop: 10, padding: 10}}
/>
Saya juga sudah mencoba dengan kode ini
<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>
Juga saya mencoba dengan cara Ini..
<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'
}
});
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" sepertitetapi 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>
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.