前言

  • 学习本系列内容需要具备一定 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使用的更多相关文章

  1. React Native之TextInput的介绍与使用(富文本封装与使用实例,常用输入框封装与使用实例)

    React Native之TextInput的介绍与使用(富文本封装与使用实例,常用输入框封装与使用实例) TextInput组件介绍 TextInput是一个允许用户在应用中通过键盘输入文本的基本组 ...

  2. react native 封装TextInput组件

    上一篇 react-native文章提到了TextInput组件对安卓的适配问题,因此对该组件进行封装很有必要. 文章地址  react native定报预披项目知识点总结 TextInput介绍 官 ...

  3. React Native(十)——TextInput一点小结

    11.24(后续的道路会更加漫长,一点一点总结上去吧~): 从昨天开始接触Mac,实在让自己有点“奔溃”的赶脚……老大说,“不要紧,多接触接触就好了.” 于是,我就开始了跟Mac死磕到底的准备……就先 ...

  4. React Native之微信分享(iOS Android)

    React Native之微信分享(iOS Android) 在使用React Native开发项目的时候,基本都会使用到微信好友或者微信朋友圈分享功能吧,那么今天我就带大家实现以下RN微信好友以及朋 ...

  5. react native TextInput

    今天我想说一下react native中的一个控件,TextInput 翻译过来就是文本输入,对应着android中的EditText.我们先看一下官方是怎样描述的.TextInput是一个允许用户在 ...

  6. React Native 组件之TextInput

    React Native 组件之TextInput类似于iOS中的UITextView或者UITextField,是作为一个文字输入的组件,下面的TextInput的用法和相关属性. /** * Sa ...

  7. React Native控件只TextInput

    TextInput是一个允许用户在应用中通过键盘输入文本的基本组件.本组件的属性提供了多种特性的配置,譬如自动完成.自动大小写.占位文字,以及多种不同的键盘类型(如纯数字键盘)等等. 比如官网最简单的 ...

  8. React Native(十三)——ios键盘挡住textInput

    渐入佳境 用React Native重构的项目也快接近尾声,剩下的就是适配ios的功能了.慢慢地也从中琢磨出了一点门道,于是就遇见了键盘遮挡textInput问题斑斑: 正常页面: android点击 ...

  9. [RN] React Native 键盘管理 在Android TextInput遮盖,上移等问题解决办法

    React Native 键盘管理 在Android TextInput遮盖,上移等问题解决办法 解决办法: 打开android工程,在AndroidManifest.xml中配置如下: <ac ...

随机推荐

  1. ASP.NET Aries 4.0 开源发布:已完成基础功能优化重写

    主要更新: 1:增加AR.Global.GetUser() 方法返回当前登陆者的用户信息. 2:重写AR.Combobox 支持下拉树. 3:调整及扩展Input下拉的配置参数. 4:优化及新增AR. ...

  2. CYQ.Data V5 从入门到放弃ORM系列:教程 - MAction类使用

    背景: 随着V5框架使用者的快速增加,终于促使我开始对整个框架编写完整的Demo. 上周大概花了一星期的时间,每天写到夜里3点半,终完成了框架所有功能的Demo. 同时,按V5框架名称空间的顺序,对每 ...

  3. Linux.NET实战手记—自己动手改泥鳅(上)

    各位读者大家好,不知各位读者有否阅读在下的前一个系列<Linux.NET 学习手记>,在前一个系列中,我们从Linux中Mono的编译安装开始,到Jexus服务器的介绍,以及如何在Linu ...

  4. 微软将向Linux用户提供SQL Server程序

    微软公司(Microsoft Corp., MSFT)将向Linux操作系统的用户提供旗下一项最赚钱的产品,这是该公司几年前无法想像的举措.这家软件巨头周一表示,将向免费的Linux Server提供 ...

  5. Web API 强势入门指南

    Web API是一个比较宽泛的概念.这里我们提到Web API特指ASP.NET Web API. 这篇文章中我们主要介绍Web API的主要功能以及与其他同类型框架的对比,最后通过一些相对复杂的实例 ...

  6. 如何删除webstrom中生成的.idea wrokspace

    首先说下遇到的问题,之前一直是通过webstrom来操纵github 以及git ,包括切换,生成分支,pull,push代码,这几天心血来潮 通过git代码进行了一次这些操作,然后当我在gitlab ...

  7. PHP 面向对象编程和设计模式 (1/5) - 抽象类、对象接口、instanceof 和契约式编程

    PHP高级程序设计 学习笔记 2014.06.09 什么是面向对象编程 面向对象编程(Object Oriented Programming,OOP)是一种计算机编程架构.OOP 的一条基本原则是计算 ...

  8. 透视 HTML子元素的margin-top样式会应用在父元素上的原由

    情况说明 当对页面中元素设置margin-top样式时,如果该元素有父元素,则margin-top会应用与父元素,子元素的top与父元素的top重叠.举例说明 <style>body{ma ...

  9. JavaScript事件概览

    JavaScript事件 JavaScript是单线程,在同一个时间点,不可能同时运行两个"控制线程". 事件句柄和事件对象 1.注册事件句柄 标准和非标准 var button= ...

  10. Oracle迁移:Linux->Windows

    源环境:RHEL6.4 + Oracle 11.2.0.4 目的环境:Windows 2003 需求:研发测试环境的Oracle数据库从Linux迁移到Windows,可以停机. 1.Windows安 ...