ReactNative 学习笔记 Component - TextInput，Touchable

最新推荐文章于 2022-08-22 15:23:30 发布

原创最新推荐文章于 2022-08-22 15:23:30 发布 · 267 阅读

0 ·

CC 4.0 BY-SA版权

ReactNative 专栏收录该内容

25 篇文章

订阅专栏

本文详细介绍了React Native中的TextInput组件及其特性配置，包括自动完成、自动大小写等功能，并展示了如何通过事件处理用户输入。此外，还介绍了三种Touchable组件（TouchableHighlight、TouchableOpacity和TouchableWithoutFeedback），用于实现组件的点击交互。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Component - TextInput

TextInput是一个允许用户在应用中通过键盘输入文本的基本组件。

本组件的属性提供了多种特性的配置，譬如自动完成、自动大小写、占位文字，以及多种不同的键盘类型（如纯数字键盘）等等。

最简单的用法就是丢一个TextInput到应用里，然后订阅它的onChangeText事件来读取用户的输入。

它还有一些其它的事件，譬如onSubmitEditing和onFocus。

实例逻辑解析：

输入变动时列出提示内容
添加state show 和 value来标记提示显示状态和input的内容

关键代码：

               <TextInput
                    keyboardType="web-search"
                    placeholder="请输入关键词"
                    value={this.state.value}
                    onChangeText={this.getValue.bind(this)}/>

Sample Code

官网API地址

Component - Touchable

RN没有Web开发那样给元素绑定click时间。RN的Text组件有onPress事件毁掉，View组件没有。

但是实际开发通常需要View被点击。因此RN提供了三个组件来赋予被点击的能力（去包裹其他组件）。

三个Touchable类型组件：

TouchableHighlight 高亮
TouchableOpacity 透明度

TouchableWithoutFeedback 无变化

    <View style={styles.flex}>
        <TouchableHighlight onPress={this.show.bind(this,'TouchableHighlight')}
        underlayColor='#E1F6FF'>
            <Text style={styles.item}>TouchableHighlight</Text>
        </TouchableHighlight>
        <TouchableOpacity onPress={this.show.bind(this,'TouchableOpacity')}>
            <Text style={styles.item}>TouchableOpacity</Text>
        </TouchableOpacity>
        <TouchableWithoutFeedback onPress={this.show.bind(this,'TouchableWithoutFeedback')}>
            <Text style={styles.item}>TouchableWithoutFeedback</Text>
        </TouchableWithoutFeedback>
    </View>

不建议使用：onLongPress、onPressIn、onPressOut