React Native 之 TextInput使用

最新推荐文章于 2024-09-10 05:11:07 发布

黑森林工作室

最新推荐文章于 2024-09-10 05:11:07 发布

阅读量8.3k

点赞数 2

分类专栏： React Native 文章标签： html native textinput onchange 文本输入框

本文链接：https://blog.csdn.net/yeshaojian/article/details/53019316

版权

本文介绍了React Native中的TextInput组件，包括其基本使用、键盘类型选择、多行输入、密码输入、占位符、自动修正、聚焦与失焦事件以及回调函数等特性。通过实例展示各种属性的效果，帮助开发者更好地理解和应用TextInput。

摘要由CSDN通过智能技术生成

前言

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