React Native随笔——组件TextInput

Posted 2020-10-10 麦豇豆

一、实例

　　先看一下我要做的搜索框的样子

• 需要一个Image，和一个TextInput
• 去掉默认下划线 underlineColorandroid=\'transparent\'
• 设置光标颜色 selectionColor=\'#ff4f39\'
• 自动获取焦点 autoFocus={true}

　　　　　　<View style={styles.searchBox}> 
                <Image source={require(\'../../img/search.png\')} style={styles.searchImg}/>
                <TextInput 
                    underlineColorAndroid=\'transparent\' 
                    autoFocus={true}
                    placeholder=\'欢聚有味\'
                    placeholderTextColor=\'#999\'
                    selectionColor=\'#ff4f39\'
                    style={styles.inputText}
                    onChangeText={(text) => this.setState({text})}
                />
            </View>

样式

• 在他们的父容器设置 flexDirection: \'row\'，让它们横着排
• 搜索框本身带有padding，所以设置padding为0，否则height为30放不下

　　searchBox:{
        flexDirection: \'row\',
        alignItems:\'center\',
        backgroundColor:\'#fff\',
        width:width*0.9,
        borderRadius:5,
        height:30,
    },
    searchImg:{
        marginLeft:15,
        marginRight:10,
    },
    inputText:{
        width:width*0.8-50,
        padding:0,
    },

 

二、其他

关于TextInput的其他属性和用法，可以看这里（http://www.hangge.com/blog/cache/detail_1526.html）

1、组件的通用属性

（1）autoCapitalize：首字母自动大写。可选值有：none、sentences、words、characters。

• none：不自动变为大写
• sentences：将每句话的首字母自动改成大写
• words：将每个单词的首字母自动改成大写
• characters：将每个英文字母自动改为大写

 

（2）placeholder：占位符，在输入前显示的文本内容。

 

（3）value：用来设置 TextInput 组件内字符串的值。

• 要慎重使用这个属性，因为它有可能会带来屏幕显示闪烁。
• 官方更推荐使用 editable 属性和 defaultValue 属性来达到相同的效果。
• 当然如果应用需要突然改变 TextInput 组件内字符串的值，还是需要使用这个属性。

 

（4）placeholderTextColor：占位符文本的颜色。

 

（5）password：如果为 true，表示密码输入框。文本显示为“*”

 

（6）multiline：如果为 true，表示多行输入。

 

（7）editable：默认为 true。如果设置为 false 表示不可编辑。

 

（8）autoFocus：如果为 true，则自动获取焦点。

 

（9）maxLength：能够输入的最长字符数。

 

（10）returnKeyType：表示软键盘返回键显示的字符串。可选值如下：

• 跨平台支持的值：done、go、next、search、send
• 仅 Android 支持的值：none、previous
• 仅 ios 支持的值：default、google、join、route、yahoo、emergency-call

 

（11）keyboardType：定义了当 TextInput 组件获得焦点时，将自动弹出哪种软键盘。可选值如下：

• Android、iOS 都支持的：default、numeric、email-address
• 仅支持 iOS：ascii-capable、numbers-and-punctuation、url、number-pad、phone-pad、name-phone-pad、decimal-pad、twitter、web-search

 

（12）secureTextEntry：默认为 false。如果为 true，则像密码框一样隐藏输入内容。

 

（13）autoCorrect：如果为 true，则会自动更正用户输入的英文单词是否正确。（默认值：true）

 

（14）blurOnSubmit：如果为 true，在输入框输入完成提交是，文本区域会被模糊化。它的默认值是 TextInput 组件 multiline 属性的非值。如果一个 TextInput 组件的 multiline 属性与 blurOnSubmit 都为 true 时，用户按下键盘上的回车键会模糊化输入的文本并触发 onSubmitEditing 事件，而不是在输入区域插入新行。

 

（15）defaultValue：用来定义 TextInput 组件中的字符串默认值。

 

（16）selectTextOnFocus：当它为 true 时，如果 TextInput 组件获得焦点，则组件中所有的文字都会被选中。

 

（17）selection：这个是一个对象类型的属性。它接受的对象结构为：

• 我们可以用来设置 TextInput 组件中被选择字符的开始与结束位置。
• 如果把开始位置与结束位置设为同一个值可以达到设置输入光标至该位置的效果。

 

（18）selectionColor：用来设置被选中文字的高亮显示颜色。在 iOS 平台，还可以使用这个属性设置输入光标的颜色。

 

2、组件 iOS 平台专有属性

（1）clearButtonMode：表示什么时候会显示清除按钮。可选值有：never、while-editing、unless-editing、always。

 

（2）clearTextOnFocus：如果为 true，当用户点击 TextInput 组件开始编辑文字时，会自动清除文字区域。

 

（3）enablesReturnKeyAutomatically：默认为 false。设置为 true 表示没有输入文本时返回键无法使用。

 

（4）keyboardAppearance：设置不同的键盘颜色。可选值有：default、light、dark，分别表示默认、明亮、偏暗。

 

3、组件 Android 平台专有属性

（1）numberOfLines：用来设置 TextInput 组件可以有多少行。

 

（2）disableFullscreenUI：是否开启全屏文本输入模式。默认为 false。

• 当为 false 时，如果手机操作系统发现 TextInput 组件的空间小，可能会让用户进入一个全屏文本输入的模式。
• 当为 true 时，操作系统的这个特性会被关闭，用户只能在 TextInput 组件中进行输入。

 

（3）inlineImageLeft：它必须是 RN 的 Android 工程中的一个图片资源的名称。RN 将会把这张图片无缩放地显示在 TextInput 组件的左侧。

 

（4）inlineImagePadding：它定义了 inlineImage（如果有的话）的 padding 与 TextInput 组件自己的 padding。

 

（5）returnKeyLabel：使用这个属性可以将手机软键盘的回车键设为指定的字符串。这个属性的优先级高于 returnKeyType。

 

（6）underlineColorAndroid：用来定义输入提示下划线的颜色。如果将它的颜色设为与 TextInput 组件的背景色一样，即可以隐藏输入提示下划线。

4、组件的方法属性

（1）onChange：当文本发生变化时，调用该函数。

• 它的回调接收一个 event 参数，通过 event.nativeEvent.text 可以获取用户输入的字符串。

 

（2）onChangeText：当文本发生变化时，调用该函数。

• onChangeText 回调函数与上面的 onChange 类似，但它的好处是直接可以接收用户输入的字符串。

 

（3）onEndEditing：当结束编辑时，调用该函数。

• 它的回调接收一个 event 参数，通过 event.nativeEvent.text 可以获取用户输入的字符串。

 

（4）onBlur：失去焦点时触发（在 onEndEditing 之后）。

• 它的回调接收一个 event 参数，通过 event.nativeEvent.text 可以获取用户输入的字符串。

 

（5）onFocus：获得焦点时触发。

• 它的回调接收一个 event 参数，通过 event.nativeEvent.text 可以获取组件中的字符串（上次输入的，或者是程序设定的默认值）

 

（6）onSubmitEditing：当结束编辑后，点击键盘的提交按钮触发该事件。

• 它的回调接收一个 event 参数，通过 event.nativeEvent.text 可以获取用户输入的字符串。

当我们通过 multiline={true} 将一个 TextInput 组件设置为多行时，要注意：

• 在 iOS 平台上，这个 TextInput 组件的 onSubmitEditing 事件永远也不会被触发，onSubmitEditing 回调函数也永远不会被执行。
• 在 Android 平台上，用户每一次按下回车键后，onSubmitEditing 事件都会被触发，但输入框中的字符串会增加一个回车换行，同时输入框会继续保持住焦点，不会失去焦点。

 

（7）onSelectionChange：当用户在文本输入框中选择的字符串发生改变时触发。

• 该回调函数会传入一个 event 参数，通过这个参数我们可以得到用户在输入框中选择一段字符串这个事件发生的时间，以及选择的子字符串在输入框中的起点位置与结束位置。

• 当用户移动输入光标时，这个事件也会被触发。比如我们将 TextInput 组件的输入光标移动到最开始位置，那么 event.nativeEvent.selection.start 和 event.nativeEvent.selection.end 的值都是 0。 

 

（8）onKeyPress（iOS 专有）：当 TextInput 组件获得焦点后，一个按键被按下时，这个回调函数将被调用并被传入按下键的键值。这个函数会在 onChange 回调函数之前被调用。 

 

（9）onContentSizeChange：当 TextInput 组件的字符行数变化时触发该事件。因此这个回调函数只对多行 TextInput 组件有效，它的参数是一个对象，我们可以从中得到当前 TextInput 组件的新的宽与高。

（10）onScroll：在 TextInput 组件滚动时会被调用。它的参数是一个对象，我们可以从中得到组件当前滚动的位置。

（11）onSelectionChange：会在 TextInput 组件的选中字符被改变时调用。它的参数是一个对象，我们可以通过其得到用户选择的字符串。

 

5、组件的成员函数

（1）isFocused()

当得到一个 TextInput 组件的引用后，通过这个方法可以判断当前这个 TextInput 组件是否获得焦点。

this.refs.aTextInputRef.isFocused();

（2）clear()

当得到一个 TextInput 组件的引用后，通过这个方法可以将 TextInput 组件中的字符串清空。

this.refs.aTextInputRef.clear();