用戶主要通過觸摸與移動應(yīng)用進(jìn)行交互涡扼。他們可以使用手勢組合苛吱，例如點擊按鈕吹泡，滾動列表或縮放地圖骤星。 React Native提供組件來處理各種常見的手勢，以及一個全面的手勢響應(yīng)系統(tǒng)爆哑，以允許更高級的手勢識別洞难，但是你最可能感興趣的一個組件是基本的Button。
顯示按鈕
按鈕提供了一個基本的按鈕組件泪漂，可以在所有平臺上很好地渲染廊营。顯示按鈕的最小示例如下所示
<Button
onPress={() => {
Alert.alert('You tapped the button!');
}}
title="Press Me"
/>
這將在iOS上呈現(xiàn)藍(lán)色標(biāo)簽，在Android上呈現(xiàn)藍(lán)色圓角矩形萝勤，并顯示白色文字露筒。按下按鈕將調(diào)用“onPress”功能，在這種情況下顯示一個警報彈出窗口敌卓。如果你喜歡慎式，你可以指定一個“顏色”道具來改變你的按鈕的顏色。
import React, { Component } from 'react';
import { Alert, Button, StyleSheet, View } from 'react-native';
export default class ButtonBasics extends Component {
_onPressButton() {
Alert.alert('You tapped the button!');
}
render() {
return (
<View style={ styles.container } >
<View style={ styles.buttonContainer } >
<Button
onPress={this._onPressButton}
title='Press Me'
/>
</View>
<View style={ styles.buttonContainer } >
<Button
onPress={this._onPressButton}
title='Press Me'
color='#841584'
/>
</View>
<View style={ styles.alternativeLayoutButtonContainer } >
<Button
onPress={this._onPressButton}
title='This loos great!'
/>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
},
buttonContainer: {
margin: 20,
},
alternativeLayoutButtonContainer: {
margin: 20,
flexDirection: 'row',
justifyContent: 'space-between'
}
});
image.png
可點擊
如果基本按鈕看起來不適合您的應(yīng)用程序趟径，則可以使用React Native提供的任何“可觸摸”組件構(gòu)建您自己的按鈕瘪吏。 “可觸摸”組件提供了捕捉敲擊手勢的能力，并且可以在識別手勢時顯示反饋蜗巧。但是掌眠，這些組件不提供任何默認(rèn)樣式，因此您需要做一些工作才能讓它們在您的應(yīng)用中很好地顯示幕屹。
您使用哪個“可觸摸”組件取決于您想要提供的反饋類型：
- 通常蓝丙，您可以使用TouchableHighlight在任何地方使用網(wǎng)頁上的按鈕或鏈接。當(dāng)用戶按下按鈕時望拖，視圖的背景會變暗渺尘。
- 您可以考慮在Android上使用TouchableNativeFeedback來顯示響應(yīng)用戶觸摸的墨水表面反應(yīng)波紋。
- TouchableOpacity可用于通過減少按鈕的不透明度來提供反饋说敏，從而在用戶按下時可以看到背景鸥跟。
- 如果您需要處理輕按手勢，但不想顯示任何反饋盔沫，請使用TouchableWithoutFeedback医咨。
在某些情況下，您可能需要檢測用戶何時按下并保持一定的時間架诞。這些長按可以通過將功能傳遞給任何“可觸摸”組件的onLongPress支柱來處理拟淮。
import React, { Component } from 'react';
import { Alert, Platform, StyleSheet, Text, TouchableHightlight, TouchableOpacity, TouchableNativeFeedback, TouchableWithoutFeedback, View, TouchableHighlight } from 'react-native';
export default class Touchables 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>
<TouchableNativeFeedback
onPress={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>
<TouchableHighlight onPress={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: {
padding: 20,
color: 'white'
}
});
image.png
