Import_this #
в
import {AppRegistry, Text, View, Button, StyleSheet} from 'react-native';
Это моя кнопка реагирует код, но стиль не работает Харе ...
<Button
onPress={this.onPress.bind(this)}
title={"Go Back"}
style={{color: 'red', marginTop: 10, padding: 10}}
/>
Также я попробовать этот код
<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>
Вопрос #Обновление:
Также я попробовать этот способ..
<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'
}
});
В реагировать родной кнопки очень ограничены в том, что вы можете сделать, см.; кнопка
Он не имеет стиль проп, и вы Don'т набор текста на "веб-пути" и как<кнопка>тхт</кнопку> но через свойство title <кнопка заголовок="в формате txt, что" />
Если вы хотите иметь больше контроля над внешний вид, вы должны использовать один из TouchableXXXX' компоненты, как TouchableOpacity Они очень проста в использовании :-)
У меня была проблема с margin и padding с кнопки. Я добавил кнопку в меню " Вид "компонент и применить свойства "вид".
<View style={{margin:10}}>
<Button
title="Decrypt Data"
color="orange"
accessibilityLabel="Tap to Decrypt Data"
onPress={() => {
Alert.alert('You tapped the Decrypt button!');
}}
/>
</View>
Если вы не хотите создать свой собственный компонент Button, быстрый и грязный решением будет обернуть кнопку в вид, который позволяет хотя бы нанести разметку для укладки.
Например, это может создать ряд кнопок:
<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>
Родной кнопки реагируют очень ограничены в возможность, которую они предоставляют.Вы можете использовать TouchableHighlight или TouchableOpacity укладка этих элементов и накрутка кнопок, с этим
<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>
Вы также можете использовать библиотеку реагировать на кнопки настроены .Одна хорошая библиотека реагировать родной кнопки (https://www.npmjs.com/package/react-native-button)
Только сама учусь, но упаковка в виде может позволить вам добавить стили вокруг кнопки.
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>
)
})
}
})
Вместо использования кнопки . вы можете использовать текст на родном реагировать, а затем сделать в осязаемый
<TouchableOpacity onPress={this._onPressButton}>
<Text style = {'your custome style'}>
button name
</Text>
</TouchableOpacity >
Попробуйте этот
<TouchableOpacity onPress={() => this._onPressAppoimentButton()} style={styles.Btn}>
<Button title="Order Online" style={styles.Btn} > </Button>
</TouchableOpacity>
Мы можем использовать buttonStyle
проп сейчас.<БР />
https://react-native-training.github.io/react-native-elements/docs/button.html#buttonstyle
Я знаю, что это некро-постинг, но я нашел весьма простой способ просто добавить в верхнее поле и нижнее поле на саму кнопку без того, чтобы построить что-нибудь еще.
При создании стилей, будь то встроенные или создание объекта для передачи, вы можете сделать это:
var buttonStyle = {
marginTop: "1px",
marginBottom: "1px"
}
Кажется, что добавление кавычек вокруг значения делает его работу. Я не'т знаю, если это потому, что он'ы более поздней версии реагировать против того, что было опубликовано два года назад, но я знаю, что это работает сейчас.