React Native - TextInput详细解说

不念不忘少年蓝@ 2022-03-14 12:48 277阅读 0赞

### 1，TextInput组件介绍[\#][Link 1] ###

TextInput 组件除了作为输入框实现基本的输入功能外，它还提供了许多其他功能，比如自动校验、占位符以及指定弹出不同的键盘类型等。

### 2，组件的属性[\#][Link 2] ###

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

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

（3）value：文本输入框的默认值。

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

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

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

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

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

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

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

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

（12）returnKeyType：表示软键盘返回键显示的字符串。可选值为：default、go、google、join、next、route、search、send、yahoo、done、emergency-call。

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

###    3，组件的方法[\#][Link 3] ###

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

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

（3）onBlur：失去焦点时触发。

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

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

###    4，使用样例[\#][Link 4] ###

（1）效果图

*  页面上添加一个 TextInput 用于输入文字，并设置相关的占位符文字以及样式。
 *  当输入框文字改变时，下方 Text 组件会实时统计并显示输入的文字长度。
 *  点击输入框右侧“搜索”按钮，则将输入框内容弹出显示。

[![原文:React Native - 文本输入框（TextInput）的使用详解][React Native - _TextInput]][React Native - _TextInput_React Native - _TextInput]   [![原文:React Native - 文本输入框（TextInput）的使用详解][React Native - _TextInput 1]][React Native - _TextInput_React Native - _TextInput]   [![原文:React Native - 文本输入框（TextInput）的使用详解][React Native - _TextInput 2]][React Native - _TextInput_React Native - _TextInput]

（2）样例代码

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 </td> 
 <td> <code>import React, { Component } from </code><code>'react'</code><code>;</code> <code>import { </code> <code>&nbsp;&nbsp;</code><code>AppRegistry,</code> <code>&nbsp;&nbsp;</code><code>StyleSheet,</code> <code>&nbsp;&nbsp;</code><code>Text,</code> <code>&nbsp;&nbsp;</code><code>View,</code> <code>&nbsp;&nbsp;</code><code>TextInput,</code> <code>} from </code><code>'react-native'</code><code>;</code> &nbsp; <code>//输入框组件</code> <code>class Search extends Component { </code> <code>&nbsp;&nbsp;</code><code>//构造函数</code> <code>&nbsp;&nbsp;</code><code>constructor(props) { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>super</code><code>(props);</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>this</code><code>.state = {text: </code><code>''</code><code>};</code> <code>&nbsp;&nbsp;</code><code>}</code> &nbsp; <code>&nbsp;&nbsp;</code><code>//组件渲染</code> <code>&nbsp;&nbsp;</code><code>render() { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>return</code>&nbsp;<code>(</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;View style={styles.flex}&gt;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;View style={[styles.flexDirection, styles.inputHeight]}&gt;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;View style={styles.flex}&gt;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;TextInput</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>style={styles.input}</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>returnKeyType=</code><code>"search"</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>placeholder=</code><code>"请输入关键字"</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>onChangeText={(text) =&gt; </code><code>this</code><code>.setState({text})}/&gt;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;/View&gt;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;View style={styles.btn}&gt;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;Text style={styles.search} onPress={ </code><code>this</code><code>.search.bind(</code><code>this</code><code>)}&gt;搜索&lt;/Text&gt;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;/View&gt;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;/View&gt;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;Text style={styles.tip}&gt;已输入{ </code><code>this</code><code>.state.text.length}个文字&lt;/Text&gt;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;/View&gt;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>);</code> <code>&nbsp;&nbsp;</code><code>}</code> &nbsp; <code>&nbsp;&nbsp;</code><code>//搜索按钮点击</code> <code>&nbsp;&nbsp;</code><code>search(){ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>alert(</code><code>"您输入的内容为："</code><code>+</code><code>this</code><code>.state.text);</code> <code>&nbsp;&nbsp;</code><code>}</code> <code>}</code> &nbsp; <code>//默认应用的容器组件</code> <code>class App extends Component { </code> <code>&nbsp;&nbsp;&nbsp;</code><code>render() { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>return</code>&nbsp;<code>(</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;View style={[styles.flex, styles.topStatus]}&gt;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;Search&gt;&lt;/Search&gt;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;/View&gt;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>);</code> <code>&nbsp;&nbsp;&nbsp;</code><code>}</code> <code>&nbsp;</code><code>}</code> &nbsp; <code>//样式定义</code> <code>const styles = StyleSheet.create({ </code> <code>&nbsp;&nbsp;</code><code>flex:{ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>flex: 1,</code> <code>&nbsp;&nbsp;</code><code>},</code> <code>&nbsp;&nbsp;</code><code>flexDirection:{ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>flexDirection:</code><code>'row'</code> <code>&nbsp;&nbsp;</code><code>},</code> <code>&nbsp;&nbsp;</code><code>topStatus:{ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>marginTop:25,</code> <code>&nbsp;&nbsp;</code><code>},</code> <code>&nbsp;&nbsp;</code><code>inputHeight:{ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>height:45,</code> <code>&nbsp;&nbsp;</code><code>},</code> <code>&nbsp;&nbsp;</code><code>input:{ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>height:45,</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>borderWidth:1,</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>marginLeft: 5,</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>paddingLeft:5,</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>borderColor: </code><code>'#ccc'</code><code>,</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>borderRadius: 4</code> <code>&nbsp;&nbsp;</code><code>},</code> <code>&nbsp;&nbsp;</code><code>btn:{ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>width:55,</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>marginLeft:-5,</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>marginRight:5,</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>backgroundColor:</code><code>'#23BEFF'</code><code>,</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>height:45,</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>justifyContent:</code><code>'center'</code><code>,</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>alignItems: </code><code>'center'</code> <code>&nbsp;&nbsp;</code><code>},</code> <code>&nbsp;&nbsp;</code><code>search:{ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>color:</code><code>'#fff'</code><code>,</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>fontSize:15,</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>fontWeight:</code><code>'bold'</code> <code>&nbsp;&nbsp;</code><code>},</code> <code>&nbsp;&nbsp;</code><code>tip:{ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>marginLeft: 5,</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>marginTop: 5,</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>color: </code><code>'#C0C0C0'</code><code>,</code> <code>&nbsp;&nbsp;</code><code>}</code> <code>});</code> &nbsp; <code>AppRegistry.registerComponent(</code><code>'HelloWorld'</code><code>, () =&gt; App);</code> </td> 
 </tr> 
 </tbody> 
</table>

原文出自：[www.hangge.com][]  转载请保留原文链接：[http://www.hangge.com/blog/cache/detail\_1526.html][http_www.hangge.com_blog_cache_detail_1526.html]

[Link 1]: https://www.cnblogs.com/gdsblog/p/7088064.html#idx_0
[Link 2]: https://www.cnblogs.com/gdsblog/p/7088064.html#idx_1
[Link 3]: https://www.cnblogs.com/gdsblog/p/7088064.html#idx_2
[Link 4]: https://www.cnblogs.com/gdsblog/p/7088064.html#idx_3
[React Native - _TextInput]: http://www.hangge.com/blog_uploads/201701/2017012315034571132.png
[React Native - _TextInput_React Native - _TextInput]: /images/20220313/617b49dcee8b49e28a427d13d9f5842e.png
[React Native - _TextInput 1]: http://www.hangge.com/blog_uploads/201701/2017012315035589151.png
[React Native - _TextInput 2]: http://www.hangge.com/blog_uploads/201701/2017012315040249533.png
[www.hangge.com]: http://www.hangge.com/
[http_www.hangge.com_blog_cache_detail_1526.html]: http://www.hangge.com/blog/cache/detail_1526.html