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
- 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的介绍与使用(富文本封装与使用实例,常用输入框封装与使用实例) TextInput组件介绍 TextInput是一个允许用户在应用中通过键盘输入文本的基本组 ...
- react native 封装TextInput组件
上一篇 react-native文章提到了TextInput组件对安卓的适配问题,因此对该组件进行封装很有必要. 文章地址 react native定报预披项目知识点总结 TextInput介绍 官 ...
- React Native(十)——TextInput一点小结
11.24(后续的道路会更加漫长,一点一点总结上去吧~): 从昨天开始接触Mac,实在让自己有点“奔溃”的赶脚……老大说,“不要紧,多接触接触就好了.” 于是,我就开始了跟Mac死磕到底的准备……就先 ...
- React Native之微信分享(iOS Android)
React Native之微信分享(iOS Android) 在使用React Native开发项目的时候,基本都会使用到微信好友或者微信朋友圈分享功能吧,那么今天我就带大家实现以下RN微信好友以及朋 ...
- react native TextInput
今天我想说一下react native中的一个控件,TextInput 翻译过来就是文本输入,对应着android中的EditText.我们先看一下官方是怎样描述的.TextInput是一个允许用户在 ...
- React Native 组件之TextInput
React Native 组件之TextInput类似于iOS中的UITextView或者UITextField,是作为一个文字输入的组件,下面的TextInput的用法和相关属性. /** * Sa ...
- React Native控件只TextInput
TextInput是一个允许用户在应用中通过键盘输入文本的基本组件.本组件的属性提供了多种特性的配置,譬如自动完成.自动大小写.占位文字,以及多种不同的键盘类型(如纯数字键盘)等等. 比如官网最简单的 ...
- React Native(十三)——ios键盘挡住textInput
渐入佳境 用React Native重构的项目也快接近尾声,剩下的就是适配ios的功能了.慢慢地也从中琢磨出了一点门道,于是就遇见了键盘遮挡textInput问题斑斑: 正常页面: android点击 ...
- [RN] React Native 键盘管理 在Android TextInput遮盖,上移等问题解决办法
React Native 键盘管理 在Android TextInput遮盖,上移等问题解决办法 解决办法: 打开android工程,在AndroidManifest.xml中配置如下: <ac ...
随机推荐
- 札记:Java异常处理
异常概述 程序在运行中总会面临一些"意外"情况,良好的代码需要对它们进行预防和处理.大致来说,这些意外情况分三类: 交互输入 用户以非预期的方式使用程序,比如非法输入,不正当的操作 ...
- mono -图片处理
这篇文章中您将了解到以下内容 保存Bitmap WebClient文件上传 向服务端传递数据 保存Bitmap 做移动端开发,图片上传下载是最普通的需求了. 在mono for android中按照资 ...
- mono for android 读取网络远程图片
布局 <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android=& ...
- Microsoft SQL Server中的事务与并发详解
本篇索引: 1.事务 2.锁定和阻塞 3.隔离级别 4.死锁 一.事务 1.1 事务的概念 事务是作为单个工作单元而执行的一系列操作,比如查询和修改数据等. 事务是数据库并发控制的基本单位,一条或者一 ...
- Java下好用的开源库推荐
作者:Jack47 转载请保留作者和原文出处 欢迎关注我的微信公众账号程序员杰克,两边的文章会同步,也可以添加我的RSS订阅源. 本文想介绍下自己在Java下做开发使用到的一些开源的优秀编程库,会不定 ...
- hibernate与Struts框架结合编写简单针对修改练习
失败页面fail.jsp <%@ page language="java" contentType="text/html; charset=UTF-8" ...
- 在Windows上安装Elasticsearch 5.0
在windows上安装Elasticsearch Elasticsearch可以使用.zip软件包安装在Windows上. elasticsearch-service.bat命令,它将设置Elasti ...
- ASP.NET MVC5+EF6+EasyUI 后台管理系统(46)-工作流设计-设计分支
系列目录 步骤设置完毕之后,就要设置好流转了,比如财务申请大于50000元(请假天数>5天)要总经理审批,否则财务审批之后就结束了. 设置分支没有任何关注点,我们把关注点都放在了用户的起草表单. ...
- Java设计模式之代理模式(Proxy)
前言: 最近在研究Retrofit开源框架的时候,其主要核心代码是通过注解标示参数,动态代理模式实现具体接口,反射机制进行参数解析,最终实现发送请求.其实之前在学习Xutils源码的时候,Xutils ...
- 【转】基于linux下的dm9000网卡移植全分析
转自:http://blog.sina.com.cn/s/blog_6abf2c04010189ui.html DM9000可以直接与ISA总线相连,也可以与大多数CPU直接相连.Mini2440采用 ...