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 (<TextInputstyle={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>

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

React Native TextInput相关推荐

React Native TextInput 收起键盘
问题描述: React Native 在iOS端使用TextInput弹起键盘时,收起不了解决方案: // 先引入KeyboardAvoidingView组件,需要ScrollView组件配合使用 ...
react native TextInput输入限制字数长度在安卓和iOS设备上部分系统键盘输入问题
前奏对于正在学习RN和已经在RN这条路上摸爬滚打很久的看官应该都知道,虽然RN的跨平台做的很不赖,但是也有一些小细节是无法兼顾的,今天兄弟就遇到了一个小问题.(小问题有时候却很致命). 问题描述安 ...
React Native 入门实战视频教程（36 个视频）
React Native 入门实战视频教程(36 个视频) #1 React Native 课程介绍「02:14」 #2 搭建 React Native 开发与运行环境跑起来「05:07」 #3 演示 ...
React Native 入门实战视频教程（37 个视频）
我这里有视频教程,全部是我自己辛苦录的,有兴趣的可以看下. React Native 入门实战视频教程(37 个视频) 从零开始入门学习 React Native 开发,手把手教你写 App 项目 # ...
[RN] React Native 键盘管理在Android TextInput遮盖，上移等问题解决办法
[RN] React Native 键盘管理在Android TextInput遮盖,上移等问题解决办法参考文章: (1)[RN] React Native 键盘管理在Android TextI ...
【REACT NATIVE 系列教程之十三】利用LISTVIEW与TEXTINPUT制作聊天/对话框获取组件实例常用的两种方式...
本站文章均为李华明Himi 原创,转载务必在明显处注明: 转载自[黑米GameDev街区] 原文链接: http://www.himigame.com/react-native/2346.html ...
[React Native]高度自增长的TextInput组件
之前我们学习了从零学React Native之11 TextInput了解了TextInput相关的属性. 在开发中,我们有时候有这样的需求, 希望输入区域的高度随着输入内容的长度而增长, 如下: 这 ...
16、React Native实战之TextInput组件
文本输入框:基本组件自动补全的搜索功能 TextInput的主要属性和事件如下: autoCapitalize:枚举类型,可选值有none sentences words characters ...
android input 点击事件失效,React Native：TextInput元素上的onContentSizeChange事件在Android上不起作用...
我在Android设备上的TextInput事件'onContentSizeChange'出现问题. 实际上,当我输入消息直到行尾并且文本进入下一行时,TextInput的高度不会更新.React N ...

React Native TextInput

React Native TextInput相关推荐

最新文章

热门文章