React Native组件之TextInput

一、简介

一个用于文本输入的基本组件。内置了多种特性，比如自动完成，自动大小写，以及多种不同的键盘类型。

二、TextInput

从TextInput里取值使用onChangeText事件这就是目前唯一的做法。

import React, { Component } from 'react';
import { AppRegistry, TextInput } from 'react-native';

class UselessTextInput extends Component {
constructor(props) {
super(props);
this.state = { text: 'Useless Placeholder' };
}

render() {
return (
<TextInput
style={{height: 40, borderColor: 'gray', borderWidth: 1}}
onChangeText={(text) => this.setState({text})}
value={this.state.text}
/>
);
}
}

// App registration and rendering
AppRegistry.registerComponent('AwesomeProject', () => UselessTextInput);

注意有些属性仅在

multiline

为true或者为false的时候有效。此外，当

multiline=false

时，为元素的某一个边添加边框样式（例如：

borderBottomColor

，

borderLeftWidth

等）将不会生效。为了能够实现效果你可以使用一个

View

来包裹

TextInput

：

import React, { Component } from 'react';
import { AppRegistry, View, TextInput } from 'react-native';

class UselessTextInput extends Component {
render() {
return (
<TextInput
{...this.props} // 将父组件传递来的所有props传递给TextInput;比如下面的multiline和numberOfLines
editable = {true}
maxLength = {40}
/>
);
}
}

class UselessTextInputMultiline extends Component {
constructor(props) {
super(props);
this.state = {
text: 'Useless Multiline Placeholder',
};
}

// 你可以试着输入一种颜色，比如red，那么这个red就会作用到View的背景色样式上
render() {
return (
<View style={{
backgroundColor: this.state.text,
borderBottomColor: '#000000',
borderBottomWidth: 1 }}
>
<UselessTextInput
multiline = {true}
numberOfLines = {4}
onChangeText={(text) => this.setState({text})}
value={this.state.text}
/>
</View>
);
}
}

// App registration and rendering
AppRegistry.registerComponent(
'AwesomeProject',
() => UselessTextInputMultiline
);

三、TextInput的API

autoCapitalize enmu('none','sentences','words','characters') 控制TextInput是否自动将特定的字符切换为大写。

characters: 所有字符

words: 单词首字符

sentences: 每句话首字符（默认）

none: 不能自动切换任何字符为大写

autoCorrect Boolean　　是否关闭拼写自动修正

autoFocus Boolean 在componentDidMount后是否自动聚焦

blurOnSubmit Boolean true =>文本框在提交时失焦。 单行输入框默认true，多行false。（多行设为true，按下回车键失焦+触发onSubmitEditing）

caretHidden Boolean 是否隐藏光标 默认值false

defaultValue String 文本初始值

editable Boolean 是否不可编辑 [b]默认值true[/b]

[b]keyboardType Enum("default","numeric","email-address","ascii-capabale","numbers-and-punctuation","url","number-pad","phone-pad","name-phone-pad","decimal-pad","twitter","web-search") 其中 default numeric email-address所有平台通用。[/b]

maxLength Number 最大输入长度

multiline Boolean 是否可以输入多行文字 默认false

onBlur Function 文本库失焦回调函数

onChange [b]Function 文本框内容发生变化回调函数[/b]

onChangeText [b]Function 文本框内容发生变化回调函数.改变后的内容作为参数传递[/b]

onFocus [b]Function 聚焦的时候调用[/b]

onLayout [b]Function 组件挂载或者布局变化时调用参数为{x,y, width, height}[/b]

onScroll Function 内容滚动时持续调用，传回参数{ nativeEvent:{ contentOffset:{x,y}}} 安卓上出于性能考虑不会提供contentSize参数

onSelectChange Function 长按选择文本时，选择范围变化时调用。 { nativeEvent: {selection: { start, end}}}

onSubmitEditing Function 软键盘确定／提交按钮按下时候回调。如果multiline={true}，此属性不可用

placeholder String 占位

placeholderTextColor 占位符显示的文字颜色

secureTextEntry Boolean 是否遮挡之前的输入文字（密码） 默认false

selectTextOnFocus Boolean 是否在聚焦时全选

selection {start: number, end: number}

selectionColor 设置输入框高亮时颜色

style

value 文本框中的文字内容

四、方法

isFocused(): Boolean 返回值表明当前输入框是否聚焦

clear() 清空输入框的内容