ReactNative-TextInput用法

TextInput是一个允许用户在应用中通过键盘输入文本的基本组件。本组件的属性提供了多种特性的配置，譬如自动完成、自动大小写、占位文字，以及多种不同的键盘类型（如纯数字键盘）等等。

最简单的用法就是丢一个TextInput到应用里，然后订阅它的onChangeText事件来读取用户的输入。它还有一些其它的事件，譬如onSubmitEditing和onFocus。一个简单的例子如下：

 40, borderColor: 'gray', borderWidth: 1}}
    onChangeText={(text) => this.setState({text})}
    value={this.state.text} /> 

*注意有些属性仅在multiline(多行输入)为true或者为false的时候有效。

常用属性

autoCapitalize enum('none', 'sentences', 'words', 'characters') 

控制TextInput是否要自动将特定字符切换为大写：

• characters: 所有的字符。
• words: 每个单词的第一个字符。
• sentences: 每句话的第一个字符（默认）。
• none: 不自动切换任何字符为大写。 

autoFocus bool 

如果为true，在componentDidMount后会获得焦点。默认值为false。

editable bool 

如果为false，文本框是不可编辑的。默认值为true。

keyboardType enum("default", 'numeric', 'email-address', "ascii-capable", 'numbers-and-punctuation', 'url', 'number-pad', 'phone-pad', 'name-phone-pad', 'decimal-pad', 'twitter', 'web-search') 

决定弹出的何种软键盘的，譬如numeric（纯数字键盘）。

maxLength number 

限制文本框中最多的字符数。使用这个属性而不用JS逻辑去实现，可以避免闪烁的现象。

multiline bool 

如果为true，文本框中可以输入多行文字。默认值为false。 

onChangeText function 

当文本框内容变化时调用此回调函数。改变后的文字内容会作为参数传递。 

onEndEditing function 

当文本输入结束后调用此回调函数。

onSubmitEditing function 

此回调函数当软键盘的确定/提交按钮被按下的时候调用此函数。如果multiline={true}，此属性不可用。

placeholder string 

如果没有任何文字输入，会显示此字符串。

placeholderTextColor string 

占位字符串显示的文字颜色。

secureTextEntry bool 

如果为true，文本框会遮住之前输入的文字，这样类似密码之类的敏感文字可以更加安全。默认值为false。

clearButtonMode enum('never', 'while-editing', 'unless-editing', 'always') 

是否要在文本框右侧显示“清除”按钮。

 

例子

　　style = {{height: 25, borderColor: 'gray', borderWidth: 1, borderRadius: 3}}
　　returnKeyType = "next"
　　placeholder = "标题"
　　onChangeText = {this.getValue} // 通过该方法获取输入框的值
/>

// 获取输入框内值的方法
getValue: function(text) {
　　var value = text;
　　this.setState({
　　　　value: value
　　});
}

转载于:https://www.cnblogs.com/dushuren/p/5454988.html