React Native TextInput

                    React Navtie 中的TextInput组件

Android和ios有许多不同的属性，具体视情况而定。看官方文档https://reactnative.cn/docs/0.42/textinput/    ，不同版本的属性也有些差别，我使用的是0.42版本，自己做的一点小笔记。https://reactnative.cn/docs/textinput/，这是最新的，根据你的需要选择不同版本的RN，使用不同的属性。

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

import React, { Component } from 'react';
import { AppRegistry, View, TextInput } from 'react-native';    //要引入TextInput组件

class UselessTextInput extends Component {
constructor(props) {
        super(props);
        var ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
        this.state = {
            text:'',
            refreshing: false,
            dataSource: ds.cloneWithRows([]),
        };
    }
  render() {
    return (
        <TextInput
            style={styles.textArea}
            multiline={true}     //多行输入 如果为true，文本框中可以输入多行文字。默认值为false。
            autoCorrect ={true}  //如果为false，会关闭拼写自动修正。默认值是true。
            autoFocus={true}     //自动获取焦点
            blurOnSubmit={true} //如果为true，文本框会在提交的时候失焦。对于单行输入框默认值为true，多行则为false。注意：对于多行输入框来说，如果将blurOnSubmit设为true，则在按下回车键时就会失去焦点同时触发onSubmitEditing事件，而不会换行。
            defaultValue='初始值'  //提供一个文本框中的初始值。当用户开始输入的时候，值就可以改变。在一些简单的使用情形下，如果你不想用监听消息然后更新value属性的方法来保持属性和状态同步的时候，就可以用defaultValue来代替。
            autoCapitalize="none"  //控制TextInput是否要自动将特定字符切换为大写：可选的值为：characters: 所有的字符。words: 每个单词的第一个字符.sentences: 每句话的第一个字符（默认）。none: 不自动切换任何字符为大写。
            maxLength={1000}    //限制文本框中最多的字符数。使用这个属性而不用JS逻辑去实现，可以避免闪烁的现象。
            editable={true}     //如果为false，文本框是不可编辑的。默认值为true。
            keyboardType='numeric'   //决定弹出的何种软键盘的  这些值在所有平台都可用：default 默认的键盘  numeric  数字  email-address 电子邮箱地址
            placeholder='想要发表的内容'     //文本框的默认显示
            placeholderTextColor='#ccc'    //文本框的默认显示字的颜色  
            value={this.state.text}
            underlineColorAndroid="transparent"    //TextInput在安卓上默认有一个底边框，同时会有一些padding。如果要想使其看起来和iOS上尽量一致，则需要设置padding: 0，同时设置underlineColorAndroid="transparent"来去掉底边框。而且，在安卓上如果设置multiline = {true}，文本默认会垂直居中，可设置textAlignVertical: top样式来使其居顶显示。       
            onChangeText={(text) => this.setState({text:text})}    //当文本框内容变化时调用此回调函数。改变后的文字内容会作为参数传递。在此使用箭头函数
            onBlur ={()=>{console.log('失去焦点')}} //当文本框失去焦点的时候调用此回调函数。
            onFocus={()=>{console.log('获取焦点')}} //当文本框获取焦点的时候调用此回调函数。
            onEndEditing={()=>{console.log('输入完了调用')}}   //当文本输入结束后调用此回调函数。
    returnKeyType="search"   
             onSubmitEditing ={()=>{console.log('提交了')}}  //此回调函数当软键盘的`确定`/`提交`按钮被按下的时候调用此函数。如果multiline={true}，此属性不可用。
             onLayout={()=>{console.log('组件挂载或者布局变化了')}}  //当组件挂载或者布局变化的时候调用，参数为{x, y, width, height}。
             secureTextEntry={true}  //如果为true，文本框会遮住之前输入的文字，这样类似密码之类的敏感文字可以更加安全。默认值为false。
             selectTextOnFocus ={true}  //如果为true，当获得焦点的时候，所有的文字都会被选中。
             value ='文字内容'  //文本框中的文字内容。
             selectionColor=‘red’  //设置输入框高亮时的颜色（在iOS上还包括光标）
         />
    );
  }
}

如果想给输入框加边框，在外层加View，给View写样式


<View style={{ backgroundColor: "#f2f4f7", padding:20,borderBottomWidth:1,borderBottomColor:'red'}} >
<TextInput
placeholder='在此输入关键字...'
editable={true}
multiline={false}
style={styles.text}
placeholderTextColor='#cfcfcf'
underlineColorAndroid="transparent"
returnKeyType="search"
onFocus={()=>{console.log('获取焦点')}}
onBlur ={()=>{console.log('失去焦点')}}
onChangeText={(text) =>{this.setState({text:text});}}
onSubmitEditing ={()=>{console.log('调用发送方法')}}
value={this.state.text}
/>
</View>

    第一次使用这个编辑器，可能有些瑕疵，会继续改进，不断学习，不断进步！加油！