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 是否不可编辑 默认值true
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所有平台通用。
maxLength Number 最大输入长度
multiline Boolean 是否可以输入多行文字默认false
onBlur Function 文本库失焦回调函数
onChange Function 文本框内容发生变化回调函数
onChangeText Function 文本框内容发生变化回调函数.改变后的内容作为参数传递
onFocus Function 聚焦的时候调用
onLayout Function 组件挂载或者布局变化时调用参数为{x,y, width, height}
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() 清空输入框的内容