文本输入
允许用户输入文本的基础组件——TextInput
,详细文档地址
有两个监听事件属性—— onChangeText (监听文本变化)、onSubmitEditing(监听提交文本事件,体现在手机上就是用户按下软键盘上的提交键)
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提供了可以处理常见触摸手势的组件 以及可用于识别更复杂手势的完整的手势响应系统
跨平台的按钮组件——button
,默认情况在 iOS 上渲染一个蓝色的标签状按钮,在 Android 上则会渲染一个蓝色圆角矩形带白字的按钮。
<Button
onPress={() => {
Alert.alert("你点击了按钮!");
}}
onLongPress
title="点我!"
/>
Touchable系列组件
TouchableHighlight
用来制作按钮或链接,组件会在用户手指按下时变暗TouchableOpacity
在用户手指按下时降低按钮的透明度TouchableWithoutFeedback
处理点击事件的同时,不显示任何视觉反馈TouchableNativeFeedback
在Android上,会在用户手指按下时形成类似墨水涟漪的视觉效果。