如何在 React Native 中添加按钮? [英] How to add a button in React Native?
本文介绍了如何在 React Native 中添加按钮?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我对整个无 CSS"的事情感到困惑,但我明白为什么它是有益的.我想要做的就是在屏幕中间放置一个按钮,但我还不明白 React 中的样式是如何工作的.这是我的代码:
I´m confused with this whole "no CSS" thing, but I understand why it's beneficial. All I want to do is place a button in the middle of the screen but I don't understand how styling works in React yet. This is my code:
var tapSpeed = React.createClass({
render: function() {
return (
<View style={styles.container}>
<Text style={styles.welcome}>
Tap me as fast as you can!
</Text>
<View style={styles.button}>
!
</View>
</View>
);
}
});
var styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#FFCCCC'
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10
},
button: {
textAlign: 'center',
color: '#ffffff',
marginBottom: 7,
border: 1px solid blue,
borderRadius: 2px
}
});
推荐答案
更新: 使用内置的 按钮组件.
已弃用:
将您的视图包装到 TouchableHighlight(适用于 iOS 和 TouchableNativeFeedback 适用于 Android.
Wrap your View into TouchableHighlight for iOS and TouchableNativeFeedback for Android.
var {
Platform,
TouchableHighlight,
TouchableNativeFeedback
} = React;
var tapSpeed = React.createClass({
buttonClicked: function() {
console.log('button clicked');
},
render: function() {
var TouchableElement = TouchableHighlight;
if (Platform.OS === 'android') {
TouchableElement = TouchableNativeFeedback;
}
return (
<View style={styles.container}>
<Text style={styles.welcome}>
Tap me as fast as you can!
</Text>
<TouchableElement
style={styles.button}
onPress={this.buttonClicked.bind(this)}>
<View>
<Text style={styles.buttonText}>Button!</Text>
</View>
</TouchableElement>
</View>
);
}
});
这篇关于如何在 React Native 中添加按钮?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文