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

效果：

网友评论