admin_jim 2017-12-18
textInput组件允许用户在应用中通过键盘输入文本信息，其使用方法和Text、Image一样简单，实例代码如下：
<TextInput placeholder={'请输入用户名'} style={styles01.inputStyle} underlineColorAndroid={'transparent'}/>
<TextInput placeholder={'请输入密码'} secureTextEntry={true} style={styles01.inputStyle} underlineColorAndroid={'transparent'}/>TextInput组件的属性如下表：
| 名称 | 作用 | 值 | 平台 |
|---|---|---|---|
| autoCapitalize | 自动切换成大写 | enum(‘none’,’sentences’,’words’,’characters’) none:不自动切换任何字符成大写；sentences:默认每个句子的首字母变成大写；words:每个字母的首字母变成大写；characters:每个字母全部变成大写 | iOS、Android |
| autoCorrent | 设置拼写自动修正功能，默认为开启(true) | bool | iOS、Android |
| autoFocus | 设置是否默认获取到焦点，默认为关闭(false)，componentDidMount方法被调用之后才会获取焦点(componentDidMount是React组件被渲染之后React系统回调的方法) | bool | iOS、Android |
| defaultValue | 给文本输入设置一个默认初始值 | string | iOS、Android |
| editable | 设置文本框是否可以编辑 | bool | iOS、Android |
| keyboardType | 键盘类型：用来选择默认弹出键盘的类型，例如指定numeric就是弹出数字键盘。 | ‘default’, ‘email-address’, ‘numeric’, ‘phone-pad’, ‘ascii-capable’, ‘numbers-and-punctuation’, ‘url’, ‘number-pad’, ‘name-phone-pad’, ‘decimal-pad’, ‘twitter’, ‘web-search’,鉴于平台的原因如下的值是所有平台都可以进行通用:default,numeric,email-address | iOS、Android |
| maxLength | 限制文本输入框最大的输入字符长度 | number | iOS、Android |
| multiline | 设置可以输入多行文字，默认为false(表示无论文本输入多少，都是单行显示) | bool | iOS、Android |
| onBlur | 监听方法，文本框失去焦点回调方法 | function | iOS、Android |
| onChange | 监听方法,文本框内容发生改变回调方法 | function | iOS、Android |
| onChangeText | 监听方法，文本框内容发生改变回调方法，该方法会进行传递文本内容 | function | iOS、Android |
| onEndEditing | 监听方法，当文本结束文本输入回调方法 | function | iOS、Android |
| onFocus | 监听方法 文本框获取到焦点回调方法 | function | iOS、Android |
| onLayout | 监听方法 组价布局发生变化的时候调用，调用方法参数为 {nativeFunction:{x,y,width,height}} | function | iOS、Android |
| onSelectionChange | 监听方法 当Text input选中状态被改变时调用 | function | iOS、Android |
| onSubmitEditing | 监听方法，当编辑提交的时候回调方法。不过如果multiline={true}的时候，该属性就不生效 | function | iOS、Android |
| placeholder | 当文本输入框还没有任何输入的时候，默认显示信息，当有输入的时候该值会被清除 | string | iOS、Android |
| placeholderTextColor | 设置placeholderText颜色 | string | iOS、Android |
| returnKeyType | 决定return键怎么显示 | enum(‘done’, ‘go’, ‘next’, ‘search’, ‘send’, ‘none’, ‘previous’, ‘default’, ‘emergency-call’, ‘google’, ‘join’, ‘route’, ‘yahoo’)。双平台适用：done、go、next、search、send；Android：none、previous；iOS：default、emergency-call、google、join、route、yahoo | iOS、Android |
| secureTextEntry | 设置是否为密码安全输入框 | bool，默认为false | iOS、Android |
| selectTextOnFocus | 如果为true，当获得焦点，自动选中所有文本 | bool | iOS、Android |
| selectionColor | 输入框文本的高亮颜色（iOS中包括光标） | string | iOS、Android |
| value | 组件中的值 | string | iOS、Android |
| numberOfLines | 设置TextInput的行数，multiline设置为true，并结合该属性能够满足多行的TextInput | number | Android |
| returnKeyLabel | 设置return键为文本组件，利用它替换returnKeyType | string | android |
| underlineColorAndroid | 设置TextInput的下划线颜色 | string | android |
| clearButtonMode | 清除按钮模式,设置何时应该在TextInput右边出现清除按钮 | enum(‘never’, ‘while-editing’, ‘unless-editing’, ‘always’) | iOS |
| clearTextOnFocus | 如果为true，当编辑开始自动清除TextInput文本内容 | bool | iOS |
| enablesReturnKeyAutomatically | 如果为true，当没有输入文本键盘的return键自动失效，当输入文本键盘的return键自动生效，默认值是false | bool | iOS |
| keyboardAppearance | 设置键盘的颜色 | enum(‘default’, ‘light’, ‘dark’) | iOS |
| onKeyPress | 当任何一个键被按时调用，被按的键的值作为一个实参传入function，在onChange被调用之前先执行 | function | iOS |
| selectionState | 请看DocumentSelectionState.js一些状态负责维持一个文档的选中信息（我也不懂什么意思，官网翻译的。） | DocumentSelectionState | iOS |
TextInput组件还有如下方法：
isFocused() ：判断当前的TextInput组件是否获取了焦点。
clear() ：清空TextInput组件中的文本内容。