React-Native 之 TextInput使用

作者: 珍此良辰 | 来源:发表于2016-11-03 10:47 被阅读11188次

前言

学习本系列内容需要具备一定 HTML 开发基础，没有基础的朋友可以先转至 HTML快速入门(一) 学习
本人接触 React Native 时间并不是特别长，所以对其中的内容和性质了解可能会有所偏差，在学习中如果有错会及时修改内容，也欢迎万能的朋友们批评指出，谢谢
文章第一版出自简书，如果出现图片或页面显示问题，烦请转至简书查看也希望喜欢的朋友可以点赞，谢谢

TextInput 文本输入框

React Native中的文本输入框使用和iOS比较相近，可能是因为 RN 首先封装iOS端的缘故（这点对iOS开发者来说是个好消息）
TextInput也是继承自 View,所以 View 的属性 TextInput 也能使用，一些样式类的属性可以参照 View 的相关属性
为了更好的讲解 TextInput，先创建一个基本的文本输入框

    // 视图
    var textInputTest = React.createClass({
        render(){
            return(
                <View style={styles.container}>
                    {/* 文本输入框 */}
                    <TextInput style={styles.textInputStyle}></TextInput>
                </View>
            );
        }
    });
    
    // 样式
    var styles = StyleSheet.create({
        container: {
            flex:1
        },

        textInputStyle: {
            // 设置尺寸
            width:width,
            height:40,
            marginTop:100,
            // 设置背景颜色
            backgroundColor:'green'
        }
    });

效果：

初始化效果.gif

Value：文本输入的默认值（注：如果设置了此属性，会造成无法输入的尴尬，一般会搭配JS动态设置）

    var textInputTest = React.createClass({
        render(){
            return(
                <View style={styles.container}>
                    {/* 文本输入框 */}
                    <TextInput
                        style={styles.textInputStyle}
                        value="设置了Value"
                    ></TextInput>
                </View>
            );
        }
    });

效果：

设置了Value.gif

keyboardType：设置键盘类型（决定使用哪种键盘）

    var textInputTest = React.createClass({
        render(){
            return(
                <View style={styles.container}>
                    {/* 文本输入框 */}
                    <TextInput
                        style={styles.textInputStyle}
                        keyboardType="number-pad"
                    ></TextInput>
                </View>
            );
        }
    });

效果：

设置键盘类型.gif

multiline：如果值为真，文本输入可以输入多行，默认值为假

    var textInputTest = React.createClass({
        render(){
            return(
                <View style={styles.container}>
                    {/* 文本输入框 */}
                    <TextInput
                        style={styles.textInputStyle}
                        multiline={true}
                    ></TextInput>
                </View>
            );
        }
    });

效果：

多行输入.gif

password：如果值为真，文本输入框就成为一个密码区域，默认值为假

    var textInputTest = React.createClass({
        render(){
            return(
                <View style={styles.container}>
                    {/* 文本输入框 */}
                    <TextInput
                        style={styles.textInputStyle}
                        password={true}
                    ></TextInput>
                </View>
            );
        }
    });

效果：

密码模式.gif

placeholder：在文本输入之前提示用户文本框功能，也就是占位文字

    var textInputTest = React.createClass({
        render(){
            return(
                <View style={styles.container}>
                    {/* 文本输入框 */}
                    <TextInput
                        style={styles.textInputStyle}
                        placeholder="请输入账号"
                    ></TextInput>
                </View>
            );
        }
    });

效果：

占位文字.gif

placeholderTextColor：占位字符串的文本颜色

    var textInputTest = React.createClass({
        render(){
            return(
                <View style={styles.container}>
                    {/* 文本输入框 */}
                    <TextInput
                        style={styles.textInputStyle}
                        placeholder="请输入账号"
                        placeholderTextColor="red"
                    ></TextInput>
                </View>
            );
        }
    });

效果：

占位文字颜色.gif

autoCapitalize：控制TextInput是否要自动将特定字符切换为大写

none：不自动使用任何东西
sentences：每个句子的首字母（默认）
words：每一个单词的首字母
characters：所有字符

    var textInputTest = React.createClass({
        render(){
            return(
                <View style={styles.container}>
                    {/* 文本输入框 */}
                <TextInput
                    style={styles.textInputStyle}
                    placeholder="none"
                    autoCapitalize="none"
                ></TextInput>
                {/* 文本输入框 */}
                <TextInput
                    style={styles.textInputStyle}
                    placeholder="sentences"
                    autoCapitalize="sentences"
                ></TextInput>
                {/* 文本输入框 */}
                <TextInput
                    style={styles.textInputStyle}
                    placeholder="words"
                    autoCapitalize="words"
                ></TextInput>
                {/* 文本输入框 */}
                <TextInput
                    style={styles.textInputStyle}
                    placeholder="characters"
                    autoCapitalize="characters"
                ></TextInput>
                </View>
            );
        }
    });

效果：

autoCapitalize.gif

autoCorrect：如果为false，会关闭拼写自动修正。默认值是true。

    var textInputTest = React.createClass({
        render(){
            return(
                <View style={styles.container}>
                    {/* 文本输入框 */}
                <TextInput
                    style={styles.textInputStyle}
                    placeholder="没有自动改正拼写"
                    autoCorrect={false}
                ></TextInput>
                {/* 文本输入框 */}
                <TextInput
                    style={styles.textInputStyle}
                    placeholder="自动改正拼写"
                    autoCorrect={true}
                ></TextInput>
                </View>
            );
        }
    });

效果：

autoCorrect.gif

autoFocus：如果为true，在componentDidMount后会获得焦点。默认值为false。

    var textInputTest = React.createClass({
        render(){
            return(
                <View style={styles.container}>
                    {/* 文本输入框 */}
                    <TextInput
                        style={styles.textInputStyle}
                        autoFocus={true}
                    ></TextInput>
                </View>
            );
        }
    });

效果：

autoFocus.gif

clearButtonMode：清除按钮出现的时机

never：不出现
while-editing：编辑的时候出现
unless-editing：没有编辑时出现
always：总是出现

    var textInputTest = React.createClass({
        render(){
            return(
                <View style={styles.container}>
                    {/* 文本输入框 */}
            <TextInput
                style={styles.textInputStyle}
                placeholder="never"
                clearButtonMode="never"
            ></TextInput>
            {/* 文本输入框 */}
            <TextInput
                style={styles.textInputStyle}
                placeholder="while-editing"
                clearButtonMode="while-editing"
            ></TextInput>
            {/* 文本输入框 */}
            <TextInput
                style={styles.textInputStyle}
                placeholder="unless-editing"
                clearButtonMode="unless-editing"
            ></TextInput>
            {/* 文本输入框 */}
            <TextInput
                style={styles.textInputStyle}
                placeholder="always"
                clearButtonMode="always"
            ></TextInput>
                </View>
            );
        }
    });

效果：

clearButtonMode.gif

clearTextOnFocus：如果为true，每次开始输入的时候都会清除文本框的内容

    var textInputTest = React.createClass({
        render(){
            return(
                <View style={styles.container}>
                    {/* 文本输入框 */}
                    <TextInput
                        style={styles.textInputStyle}
                        clearTextOnFocus={true}
                    ></TextInput>
                </View>
            );
        }
    });

效果：

clearTextOnFocus.gif

editable：如果值为假，文本是不可编辑，默认值为真

    var textInputTest = React.createClass({
        render(){
            return(
                <View style={styles.container}>
                    {/* 文本输入框 */}
                    <TextInput
                        style={styles.textInputStyle}
                        editable={false}
                    ></TextInput>
                </View>
            );
        }
    });

效果：

editable.gif

enablesReturnKeyAutomatically：如果为true，键盘会在文本框内没有文字的时候禁用确认按钮。默认值为false。

    var textInputTest = React.createClass({
        render(){
            return(
                <View style={styles.container}>
                    {/* 文本输入框 */}
                <TextInput
                    style={styles.textInputStyle}
                    enablesReturnKeyAutomatically={true}
                ></TextInput>
                {/* 文本输入框 */}
                <TextInput
                    style={styles.textInputStyle}
                    enablesReturnKeyAutomatically={false}
                ></TextInput>
                </View>
            );
        }
    });

效果：

enablesReturnKeyAutomatically.gif

returnKeyType：决定返回键的样式

default
go
google
join
next
route
search
send
yahoo
done
emergency-call

    var textInputTest = React.createClass({
        render(){
            return(
                <View style={styles.container}>
                    {/* 文本输入框 */}
                <TextInput
                    style={styles.textInputStyle}
                    returnKeyType="go"
                ></TextInput>
                {/* 文本输入框 */}
                <TextInput
                    style={styles.textInputStyle}
                    returnKeyType="join"
                ></TextInput>
                {/* 文本输入框 */}
                <TextInput
                    style={styles.textInputStyle}
                    returnKeyType="done"
                ></TextInput>
                </View>
            );
        }
    });

效果：

returnKeyType.gif

secureTextEntry：如果值为真，文本输入框就会使输入的文本变模糊，以便于像密码这样敏感的文本保持安全，类似 password 属性，默认值为假

    var textInputTest = React.createClass({
        render(){
            return(
                <View style={styles.container}>
                    {/* 文本输入框 */}
                    <TextInput
                        style={styles.textInputStyle}
                        keyboardType="number-pad"
                    ></TextInput>
                </View>
            );
        }
    });

效果：

secureTextEntry.gif

onChange：当文本框内容变化时调用此回调函数

    var textInputTest = React.createClass({
        render(){
            return(
                <View style={styles.container}>
                    {/* 文本输入框 */}
                    <TextInput
                        style={styles.textInputStyle}
                        onChange={() => {alert('文本框内容改变')}}
                    ></TextInput>
                </View>
            );
        }
    });

效果：

onChange.gif

onChangeText：当文本框内容变化时调用此回调函数。改变后的文字内容会作为参数传递

    var textInputTest = React.createClass({
        render(){
            return(
                <View style={styles.container}>
                    {/* 文本输入框 */}
                    <TextInput
                        style={styles.textInputStyle}
                        onChangeText={(Text) => {alert('文字改变')}}
                    ></TextInput>
                </View>
            );
        }
    });

效果：

onChangeText.gif

onFocus：当文本框获得焦点的时候调用此回调函数

    var textInputTest = React.createClass({
        render(){
            return(
                <View style={styles.container}>
                    {/* 文本输入框 */}
                    <TextInput
                        style={styles.textInputStyle}
                        onFocus={() => {alert('文本框获得焦点')}}
                    ></TextInput>
                </View>
            );
        }
    });

效果：

onFoucs.gif

onBlur：当文本框失去焦点的时候调用此回调函数

    var textInputTest = React.createClass({
        render(){
            return(
                <View style={styles.container}>
                    {/* 文本输入框 */}
                    <TextInput
                        style={styles.textInputStyle}
                        onBlur={() => {alert('失去焦点')}}
                    ></TextInput>
                </View>
            );
        }
    });

效果：

onBlur.gif

onEndEditing：结束编辑时，调用回调函数

    var textInputTest = React.createClass({
        render(){
            return(
                <View style={styles.container}>
                    {/* 文本输入框 */}
                    <TextInput
                        style={styles.textInputStyle}
                        onEndEditing={() => {alert('结束文本编辑')}}
                    ></TextInput>
                </View>
            );
        }
    });

效果：

onEndEditing.gif

网友评论

Cindy孙迪:如何设置文本框里面文字的高度？
珍此良辰:直接设置TextInput组件的样式fontSize,问题建议多看源码，多尝试！
lrxxhyf:怎么控制输入中文拼音的时候不触发onChangeText方法
快让开我要开大了:@lrxxhyf 有一个办法——延迟触发搜索事件。就是说当用户输入结束后再执行搜索，如何判定用户输入结束呢？1秒钟内没有再输入任何东西视为输入结束，执行搜索事件，用户输入没有停止就等待。这样一方面节省流量，另一方面减轻服务器压力，第三方面提升用户体验，反应迟缓1秒钟根本无所谓，这个时间还可以根据需求来延长缩短。
lrxxhyf:我这边是在做一个模糊搜索，在onchangeText事件里调查询的方法，如果查询结果为空就显示没有数据的占位图，有数据的话就显示列表数据。我每次输入中文拼音的时候都会调查询方法，导致拼音还没输完，就显示没有数据的占位图。根据你给的方法，只能查询中文，我想了一个折中的方法，在模糊匹配时只匹配中文，其他字符通过键盘上的搜索按钮来查询匹配。实在想不到有什么更好的办法
珍此良辰:onchangeText是组件内部自动调用的，很好奇在什么情况下会有这样的需求，不过这边提出我自己的解决思路，先为此需求的textinput设置ref，通过监听onchangeText来判断输入的值是否为中文（这边把正则表达式给你“ [\u4e00-\u9fa5] ”）如果为中文即不处理即可，如果有更好的方案，也欢迎留言探讨
大象飞:输入不了中文
珍此良辰:@大象飞你的情况应该是.55版本的bug，网上有很多解决方案，可自行搜索
宁夏灼雪__:你好，请问第一个例子的
textInputStyle: {
// 设置尺寸
width:width,
height:40,
marginTop:100,
// 设置背景颜色
backgroundColor:'green'
}
width:width 是有点继承父控件width的意思吗？实际测试会报错
宁夏灼雪__:@黑森林工作室谢谢~
珍此良辰:@宁夏灼雪__ var {width, height} = Dimensions.get('window'); // 获取根窗口宽高
全栈菜馆:如何同时让多个TextInput清空内容?
珍此良辰:@lin_易困 returnKeyType只不过是设置对应键盘 return键的样式，是枚举，并没有监听功能，如果想要监听键盘，可以使用Keyboard对键盘进行监听和相应操作！
uuuuuuw:returnKeyType 设置之后点击后如何捕获他的事件
珍此良辰:@Web前端菜鸡一枚拿到要更改的textinput统一修改不就好了嘛
咸鱼王fire:如何在textinput 里面加一个背景图呢
f2b57f7a7e44:如何我想设置占位符的字体大小呢？我在onchange里面加一个方法判断当前是否有输入内容，如果有内容设置fontsize的大小，但是android有一个问题，就是第一个输入字符会消失
珍此良辰:@咸鱼王fire 可以尝试在图片上添加textInput，然后是其透明

React-Native 之 TextInput使用

前言

TextInput 文本输入框

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

React-Native

React Native

React-Native开发大全

RN学习日志

RN