React Native 之 TextInput使用

Posted 黑森林工作室

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了React Native 之 TextInput使用相关的知识,希望对你有一定的参考价值。

前言

  • 学习本系列内容需要具备一定 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‘
        }
    });

效果:

技术分享

  • Value:文本输入的默认值(注:如果设置了此属性,会造成无法输入的尴尬,一般会搭配JS动态设置)
    var textInputTest = React.createClass({
        render(){
            return(
                <View style={styles.container}>
                    {/* 文本输入框 */}
                    <TextInput
                        style={styles.textInputStyle}
                        value="设置了Value"
                    ></TextInput>
                </View>
            );
        }
    });

效果:

技术分享

  • keyboardType:设置键盘类型(决定使用哪种键盘)
    var textInputTest = React.createClass({
        render(){
            return(
                <View style={styles.container}>
                    {/* 文本输入框 */}
                    <TextInput
                        style={styles.textInputStyle}
                        keyboardType="number-pad"
                    ></TextInput>
                </View>
            );
        }
    });

效果:

技术分享

  • multiline:如果值为真,文本输入可以输入多行,默认值为假
    var textInputTest = React.createClass({
        render(){
            return(
                <View style={styles.container}>
                    {/* 文本输入框 */}
                    <TextInput
                        style={styles.textInputStyle}
                        multiline={true}
                    ></TextInput>
                </View>
            );
        }
    });

效果:

技术分享

  • password:如果值为真,文本输入框就成为一个密码区域,默认值为假
    var textInputTest = React.createClass({
        render(){
            return(
                <View style={styles.container}>
                    {/* 文本输入框 */}
                    <TextInput
                        style={styles.textInputStyle}
                        password={true}
                    ></TextInput>
                </View>
            );
        }
    });

效果:

技术分享

  • placeholder:在文本输入之前提示用户文本框功能,也就是占位文字
    var textInputTest = React.createClass({
        render(){
            return(
                <View style={styles.container}>
                    {/* 文本输入框 */}
                    <TextInput
                        style={styles.textInputStyle}
                        placeholder="请输入账号"
                    ></TextInput>
                </View>
            );
        }
    });

效果:

技术分享

  • placeholderTextColor:占位字符串的文本颜色
    var textInputTest = React.createClass({
        render(){
            return(
                <View style={styles.container}>
                    {/* 文本输入框 */}
                    <TextInput
                        style={styles.textInputStyle}
                        placeholder="请输入账号"
                        placeholderTextColor="red"
                    ></TextInput>
                </View>
            );
        }
    });

效果:

技术分享

  • 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>
                );
            }
        });
    

    效果:
    技术分享

  • 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>
            );
        }
    });

效果:

技术分享

  • autoFocus:如果为true,在componentDidMount后会获得焦点。默认值为false。
    var textInputTest = React.createClass({
        render(){
            return(
                <View style={styles.container}>
                    {/* 文本输入框 */}
                    <TextInput
                        style={styles.textInputStyle}
                        autoFocus={true}
                    ></TextInput>
                </View>
            );
        }
    });

效果:

技术分享

  • 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>
                );
            }
        });
    

    效果:

技术分享

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

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

    效果:

技术分享

  • editable:如果值为假,文本是不可编辑,默认值为真
    var textInputTest = React.createClass({
        render(){
            return(
                <View style={styles.container}>
                    {/* 文本输入框 */}
                    <TextInput
                        style={styles.textInputStyle}
                        editable={false}
                    ></TextInput>
                </View>
            );
        }
    });

效果:

技术分享

  • 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>
            );
        }
    });

效果:

技术分享

  • 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>
                );
            }
        });
    

    效果:
    技术分享

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

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

效果:
技术分享

  • onChange:当文本框内容变化时调用此回调函数
    var textInputTest = React.createClass({
        render(){
            return(
                <View style={styles.container}>
                    {/* 文本输入框 */}
                    <TextInput
                        style={styles.textInputStyle}
                        onChange={() => {alert(‘文本框内容改变‘)}}
                    ></TextInput>
                </View>
            );
        }
    });

效果:
技术分享

  • onChangeText:当文本框内容变化时调用此回调函数。改变后的文字内容会作为参数传递
    var textInputTest = React.createClass({
        render(){
            return(
                <View style={styles.container}>
                    {/* 文本输入框 */}
                    <TextInput
                        style={styles.textInputStyle}
                        onChangeText={(Text) => {alert(‘文字改变‘)}}
                    ></TextInput>
                </View>
            );
        }
    });

效果:
技术分享

  • onFocus:当文本框获得焦点的时候调用此回调函数
    var textInputTest = React.createClass({
        render(){
            return(
                <View style={styles.container}>
                    {/* 文本输入框 */}
                    <TextInput
                        style={styles.textInputStyle}
                        onFocus={() => {alert(‘文本框获得焦点‘)}}
                    ></TextInput>
                </View>
            );
        }
    });

效果:
技术分享

  • onBlur:当文本框失去焦点的时候调用此回调函数
    var textInputTest = React.createClass({
        render(){
            return(
                <View style={styles.container}>
                    {/* 文本输入框 */}
                    <TextInput
                        style={styles.textInputStyle}
                        onBlur={() => {alert(‘失去焦点‘)}}
                    ></TextInput>
                </View>
            );
        }
    });

效果:
技术分享

  • onEndEditing:结束编辑时,调用回调函数
    var textInputTest = React.createClass({
        render(){
            return(
                <View style={styles.container}>
                    {/* 文本输入框 */}
                    <TextInput
                        style={styles.textInputStyle}
                        onEndEditing={() => {alert(‘结束文本编辑‘)}}
                    ></TextInput>
                </View>
            );
        }
    });

效果:

技术分享











以上是关于React Native 之 TextInput使用的主要内容,如果未能解决你的问题,请参考以下文章

React Native 组件之TextInput

React Native组件之TextInput

React Native:如何使用/使用 <TextInput/> 使格式卡过期?

使 React Native Text 组件在 Android 上的 TextInput 内不占用空间

React Native 之 TextInput(多个语法知识)

React Native 之 TextInput使用