TOP

React-Native 之 TextInput使用(一)
2017-10-12 18:00:53 】 浏览:10030
Tags: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'
        }
    });

效果:

初始化效果.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>
                    {/* 文本输入框 */}
                    <  
    		
    React-Native 之 TextInput使用(一) https://www.cppentry.com/bencandy.php?fid=99&id=151807

首页 上一页 1 2 3 下一页 尾页 1/3/3
】【打印繁体】【投稿】【收藏】 【推荐】【举报】【评论】 【关闭】 【返回顶部
上一篇指纹识别 下一篇iOS点击推送消息跳到应用指定页面