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中一个容许用户在应用中经过键盘输入文本的基本组件。本组件的属性提供了多种特性的配置，譬如自动完成、自动大小写、占位文字，以及多种不一样的键盘类型（如纯数字键盘）等等。javascript

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写样式java

<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>react

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

本文同步分享在博客“zoepriselife316”（CSDN）。
若有侵权，请联系 support@oschina.cn 删除。
本文参与“OSC源创计划”，欢迎正在阅读的你也加入，一块儿分享。ios