ReactNative学习笔记（六）处理文本输入&触摸事件

文本输入

允许用户输入文本的基础组件——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上，会在用户手指按下时形成类似墨水涟漪的视觉效果。