文本輸入
允許用戶輸入文本的基礎(chǔ)組件——TextInput
,詳細(xì)文檔地址
有兩個監(jiān)聽事件屬性—— onChangeText (監(jiān)聽文本變化)巍杈、onSubmitEditing(監(jiān)聽提交文本事件,體現(xiàn)在手機上就是用戶按下軟鍵盤上的提交鍵)
export default class BlinkApp extends Component {
state = {text:''};
render(){
return(
<View>
<TextInput
style={{height:40}}
placeholder="Type here to translate!"
onChangeText={(text)=>{this.setState({text})}}
onSubmitEditing={(t)=>{alert(t.nativeEvent.text)}}
value={this.state.text}
/>
<Text style={{padding: 10, fontSize: 42}}>
{this.state.text.split(' ').map((word)=> word&&'pika').join(' ')}
</Text>
</View>
)
}
}
觸摸事件
React Native提供了可以處理常見觸摸手勢的組件 以及可用于識別更復(fù)雜手勢的完整的手勢響應(yīng)系統(tǒng)
跨平臺的按鈕組件——button
驮履,默認(rèn)情況在 iOS 上渲染一個藍(lán)色的標(biāo)簽狀按鈕泻肯,在 Android 上則會渲染一個藍(lán)色圓角矩形帶白字的按鈕海洼。
<Button
onPress={() => {
Alert.alert("你點擊了按鈕!");
}}
onLongPress
title="點我休里!"
/>
Touchable系列組件
TouchableHighlight
用來制作按鈕或鏈接,組件會在用戶手指按下時變暗TouchableOpacity
在用戶手指按下時降低按鈕的透明度TouchableWithoutFeedback
處理點擊事件的同時赃承,不顯示任何視覺反饋TouchableNativeFeedback
在Android上妙黍,會在用戶手指按下時形成類似墨水漣漪的視覺效果。