从零学React Native之11 TextInput
TextInput 组件是用来通过键盘输入文字,可以使用View组件和Text组件样式,没有自己特定的样式。
与Text组件类似,TextInput组件内部的元素不再使用FlexBox布局,而采用文本布局。详情见上一篇文章从零学React Native之10Text
TextInput属性
只列出了一些常用的,详情见官网
属性名 | 描述 |
---|---|
defaultValue | 字符类型,定义TextInput组件中的字符串默认值 |
autoCorrect | 布尔类型,是否自动更正用户输入,默认是true |
autoFocus | 是否自动获取焦点,默认为false |
editable | 布尔类型,是否允许修改组件内字符,false代表不能修改 |
keyboardType | 字符串类型,取值包括’default’, ‘email-address’, ‘numeric’, ‘phone-pad’, ( ‘ascii-capable’, ‘numbers-and-punctuation’, ‘url’, ‘number-pad’, ‘name-phone-pad’, ‘decimal-pad’, ‘twitter’, ‘web-search’)括号里的只支持ios平台 |
MaxLength | 数值类型,定义TextInput最多允许用户输入多少个字符 |
multiline | 布尔类型,是否允许多行显示,默认值false |
placeholder | TextInput无文字的时候显示的提示内容 |
placeholderTextColor | placeholder文字颜色,建议不用修改 |
secureTextEntry | 布尔类型 true按照密码样式显示,默认是false |
value | 字符串类型,设置TextInput里面的值,目前有可能带来屏幕闪烁,可以用defaultValue临时代替 |
onSubmitEditing | 用户点击提交键的时候调用,如果允许多行显示,该属性失效 |
onContentSizeChange | 内容长度发生变化的时候,只会在多行显示的时候生效 |
onChangeText | 内容长度发生变化的时候调用 |
下面的例子
class UselessTextInput extends Component {
constructor(props) {
super(props);
this.state = { text: 'Useless Placeholder' };
}
render() {
return (
<TextInput
style={{marginTop:100,height: 40, borderColor: 'gray', borderWidth: 1}}
onChangeText={(text) => this.setState({text})}
value={this.state.text}
/>
);
}
}
// App registration and rendering
AppRegistry.registerComponent('AwesomeProject', () => UselessTextInput);
IOS运行结果:
Android运行结果:
两个平台不同表现
对比发现 Android端 borderWidth是不生效的,默认有一个输入的线,符合Android设计,Android字体默认很小,我们把上面样式中的height换成fontSize,来看下
<TextInput
style={{marginTop:100,fontSize: 40, borderColor: 'gray', borderWidth: 1}}
onChangeText={(text) => this.setState({text})}
value={this.state.text}/>
可以看到Android端字体变大了,但是IOS端没有了
左面是IOS右面Android
IOS平台上,没有指定height,TextInput组件不会显示。
一般情况下,我们需要指定FontSize和height,当上下padding为0的时候,height至少是FontSize的1.1倍时Android端才能保证字体完全显示。而默认Android端是有padding的。
如下面的代码可以基本适配两个平台:
render() {
return (
<TextInput
style={{marginTop:100,
fontSize:30,height:43,
borderColor: 'gray', borderWidth: 1,
paddingBottom:5,paddingTop:5}}
onChangeText={(text) => this.setState({text})}
value={this.state.text}
/>
);
}
TextInput组件的生命周期和回调方法
- 当用户点击输入框时,onFocus调用,获取焦点
- 当用户输入的时候onChangeText和onChange回调,一般使用onChangeText,里面参数为输入的文本
- 当用户按下提交键,onSubmitEditing回调,多行没有提交键
- 当组件失去焦点,onEndEditing或onBlur调用,一般情况用onEndEditing就足够了
注意:当点击点击另一个TextInput组件时会触发失去焦点事件,在单行的输入框中按下提交键,Android端不触发失去焦点事件。
最方便的操作就在onChangeText事件中时刻获取用户输入的内容
更多精彩请关注微信公众账号likeDev
从零学React Native之11 TextInput的更多相关文章
- 从零学React Native之03页面导航
之前我们介绍了RN相关的知识: 是时候了解React Native了 从零学React Native之01创建第一个程序 从零学React Native之02状态机 本篇主要介绍页面导航 上一篇文章给 ...
- 从零学React Native之02状态机
本篇文章首发于简书 欢迎关注 之前我们介绍了RN相关的知识: 是时候了解React Native了 从零学React Native之01创建第一个程序 本篇文章主要介绍下下面的知识: 1.简单界面的搭 ...
- 从零学React Native之13 持久化存储
数据持久化就是指应用程序将某些数据存储在手机存储空间中. 借助native存储 这种方式不言而喻,就是把内容传递给native层,通过原生API存储,详见从零学React Native之05混合开发 ...
- 从零学React Native之04自定义对话框
本篇主要介绍: 1. 自定义组件 2. Alert 对话框 自定义对话框 之前的我都是利用React Native提供的基础组件对它们进行排列组合, 其实自定义也很简单, 我们还是拿上一篇文章的例子进 ...
- 从零学React Native之14 网络请求
通过HTTP或者HTTPS协议与网络侧服务器交换数据是移动应用中常见的通信方式. node-fetch是RN推荐的请求方式. React Native框架在初始化项目时, 引入了node-fetch包 ...
- 从零学React Native之08Image组件
开发过程中, 几乎每个项目都会用到图片. RN就是通过Image组件显示图片.既可以加载网络图片,也可以加载本地资源图片. Image组件必须在样式中声明图片的款和高.如果没有声明,则图片将不会被呈现 ...
- 从零学React Native之07View
View 组件是React Native最基本的组件.绝大部分其他React Native 组件. View组件的颜色和边框 backgroundColor 键用来指定颜色. RN 0.19版本开始, ...
- 从零学React Native之12 组件的生命周期
一个React Native组件从它被加载,到最终被卸载会经历一个完整的生命周期.所谓生命周期,就是一个对象从开始生成到最后消亡所经历的状态,理解生命周期,是合理开发的关键. ES6语法和之前的ES5 ...
- 从零学React Native之10Text
在React Native开发中,所有需要显示的字符串文本都需要放置在Text或者Text的子组件中.虽然在之前的文章中多次使用了Text组件,但是Text组件还是值得专门学习的, 并没有想象中的那么 ...
随机推荐
- 跟我一起了解koa(一)
安装koa2 1.初始化package.json npm init 2.新建app.js,并且安装koa cnpm install --save koa //app.js const koa = re ...
- ES6学习笔记之Symbol
新的数据类型Symbol 1. 概述 ES5 的对象属性名都是字符串,这容易造成属性名的冲突.比如,你使用了一个他人提供的对象,但又想为这个对象添加新的方法(mixin 模式),新方法的名字就有可能与 ...
- Linux 拷贝有更改的文件
cp -Ruv /home/username/trunk_new/app/* /data/httpdocs/wwwroot/app/
- PHP实现微信申请退款流程实例源码
https://www.jb51.net/article/136476.htm 目录 前期准备: 前面讲了怎么实现微信支付,详见博文:PHP实现微信支付(jsapi支付)流程 和ThinkPHP中实 ...
- Spring Boot Redis 集成配置(转)
Spring Boot Redis 集成配置 .embody{ padding:10px 10px 10px; margin:0 -20px; border-bottom:solid 1px #ede ...
- bzoj3064/洛谷P4314 CPU监控【线段树】
好,长草博客被催更了[?] 我感觉这题完全可以当作线段树3 线段树2考加法和乘法标记的下放顺序,这道题更丧心病狂[?] 很多人可能跟我一样,刚看到这道题秒出思路:打一个当前最大值一个历史最大值不就完事 ...
- 洛谷P4145 上帝造题的七分钟2 / 花神游历各国(重题:洛谷SP2713 GSS4 - Can you answer these queries IV)
题目背景 XLk觉得<上帝造题的七分钟>不太过瘾,于是有了第二部. 题目描述 "第一分钟,X说,要有数列,于是便给定了一个正整数数列. 第二分钟,L说,要能修改,于是便有了对一段 ...
- Leetcode16.3Sum Closest最接近的三数之和
给定一个包括 n 个整数的数组 nums 和 一个目标值 target.找出 nums 中的三个整数,使得它们的和与 target 最接近.返回这三个数的和.假定每组输入只存在唯一答案. 例如,给定数 ...
- expect.js
前言 1> 借鉴里面的应用思想,使用断言提高代码的健壮性及维护性 2> 实现方式--不采用直接嵌入expect的方式,统一进行重写(提取常用断言方法,重新构造API) 官网介绍 https ...
- Adding basic files · lcobucci/jwt@aad22ed · GitHub
Skip to content Features Business Explore Marketplace Pricing This repository Sign in or Sign up ...