这个组件的样式是固定的。所以如果它的外观并不怎么搭配你的设计，那就需要使用TouchableOpacity或是TouchableNativeFeedback组件来定制自己所需要的按钮，视频教程如何制作一个按钮讲述了完整的过程。或者你也可以在 github.com 网站上搜索 ‘react native button’ 来看看社区其他人的作品。

具体使用哪种组件，取决于你希望给用户什么样的视觉反馈：

• 一般来说，你可以使用TouchableHighlight来制作按钮或者链接。注意此组件的背景会在用户手指按下时变暗。
• 在 Android 上还可以使用TouchableNativeFeedback，它会在用户手指按下时形成类似墨水涟漪的视觉效果。
• TouchableOpacity会在用户手指按下时降低按钮的透明度，而不会改变背景的颜色。
• 如果你想在处理点击事件的同时不显示任何视觉反馈，则需要使用TouchableWithoutFeedback。

某些场景中你可能需要检测用户是否进行了长按操作。可以在上面列出的任意组件中使用onLongPress属性来实现。

class Buttonbasics extends Component {_onPressButton() {Alert.alert('You tapped the button!');}_onLongPressButton() {Alert.alert('You long-pressed the button!');}render() {return (<View style={styles.container}><TouchableHighlight onPress={this._onPressButton} underlayColor="white"><View style={styles.button}><Text style={styles.buttonText}>TouchableHighlight</Text></View></TouchableHighlight><TouchableOpacity onPress={this._onPressButton}><View style={styles.button}><Text style={styles.buttonText}>TouchableOpacity</Text></View></TouchableOpacity><TouchableNativeFeedbackonPress={this._onPressButton}background={Platform.OS === 'android'? TouchableNativeFeedback.SelectableBackground(): ''}><View style={styles.button}><Text style={styles.buttonText}>TouchableNativeFeedback</Text></View></TouchableNativeFeedback><TouchableWithoutFeedback onPress={this._onPressButton}><View style={styles.button}><Text style={styles.buttonText}>TouchableWithoutFeedback</Text></View></TouchableWithoutFeedback><TouchableHighlightonPress={this._onPressButton}onLongPress={this._onLongPressButton}underlayColor="white"><View style={styles.button}><Text style={styles.buttonText}>Touchable with Long Press</Text></View></TouchableHighlight></View>);}
}const styles = StyleSheet.create({container: {paddingTop: 60,alignItems: 'center',},button: {marginBottom: 30,width: 260,alignItems: 'center',backgroundColor: '#2196F3',},buttonText: {textAlign: 'center',padding: 20,color: 'white',},
});export default Buttonbasics;