React Native 组件 --TextInput处理文本输入

一. 关于TextInput

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

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

二.TextInput常见的属性

因为TextInput继承自UIView，所以View的属性TextInput也能使用。

value 字符串型 文本输入的默认值
onChangeText 函数 监听用户输入的值， 此属性接受一个函数，而此函数会在文本变化时被调用。

keyboardType 键盘类型 决定打开哪种键盘，例如数字键盘等
password 布尔型 如果值为真，文本输入框就形成一个密码区域。默认值为假。
onSubmitEditing 会在文本被提交后（用户按下软键盘上的提交键）调用。
multiline 布尔型 如果值为真，文本输入可以输入多行。默认值为假。
placeholder 字符串型
placeholderColer 字符串型
onBlur 当文本输入时模糊的，调用回调函数
onEndRditing
onFocus 当输入的文本是聚焦状态时，调用回调函数
secureTextEntry 布尔型 如果值为真，文本输入框就会使输入的文本变得模糊，以便于像密码这样的敏感文本保持安全。默认值为假。
onBlur 当文本输入时模糊的，调用函数

示例 :

import React, { Component } from 'react';import {  AppRegistry,  StyleSheet,  Text,  View,  TextInput} from 'react-native';export default class TextInputDemo extends Component {  render() {    return (      <View style={styles.container}>        <TextInput            style={styles.inputStyle}            // value={'我是默认文字'}            keyboardType={'number-pad'}            // 多行显示            // multiline={true}            // password={true}            placeholder={'我是占位文字'}            clearButtonMode={'always'}        />      </View>    );  }}const styles = StyleSheet.create({    container: {        flex: 1,        backgroundColor: '#F5FCFF',    },    inputStyle:{        marginTop:30,        width:300,        height:60,        // 背景        // backgroundColor:'black',        // 边框        borderWidth:1,        borderColor:'#e8e8e8'    }});AppRegistry.registerComponent('TextInputDemo', () => TextInputDemo);