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组件的生命周期和回调方法

  1. 当用户点击输入框时,onFocus调用,获取焦点
  2. 当用户输入的时候onChangeText和onChange回调,一般使用onChangeText,里面参数为输入的文本
  3. 当用户按下提交键,onSubmitEditing回调,多行没有提交键
  4. 当组件失去焦点,onEndEditing或onBlur调用,一般情况用onEndEditing就足够了

注意:当点击点击另一个TextInput组件时会触发失去焦点事件,在单行的输入框中按下提交键,Android端不触发失去焦点事件。

最方便的操作就在onChangeText事件中时刻获取用户输入的内容

更多精彩请关注微信公众账号likeDev

从零学React Native之11 TextInput的更多相关文章

  1. 从零学React Native之03页面导航

    之前我们介绍了RN相关的知识: 是时候了解React Native了 从零学React Native之01创建第一个程序 从零学React Native之02状态机 本篇主要介绍页面导航 上一篇文章给 ...

  2. 从零学React Native之02状态机

    本篇文章首发于简书 欢迎关注 之前我们介绍了RN相关的知识: 是时候了解React Native了 从零学React Native之01创建第一个程序 本篇文章主要介绍下下面的知识: 1.简单界面的搭 ...

  3. 从零学React Native之13 持久化存储

    数据持久化就是指应用程序将某些数据存储在手机存储空间中. 借助native存储 这种方式不言而喻,就是把内容传递给native层,通过原生API存储,详见从零学React Native之05混合开发 ...

  4. 从零学React Native之04自定义对话框

    本篇主要介绍: 1. 自定义组件 2. Alert 对话框 自定义对话框 之前的我都是利用React Native提供的基础组件对它们进行排列组合, 其实自定义也很简单, 我们还是拿上一篇文章的例子进 ...

  5. 从零学React Native之14 网络请求

    通过HTTP或者HTTPS协议与网络侧服务器交换数据是移动应用中常见的通信方式. node-fetch是RN推荐的请求方式. React Native框架在初始化项目时, 引入了node-fetch包 ...

  6. 从零学React Native之08Image组件

    开发过程中, 几乎每个项目都会用到图片. RN就是通过Image组件显示图片.既可以加载网络图片,也可以加载本地资源图片. Image组件必须在样式中声明图片的款和高.如果没有声明,则图片将不会被呈现 ...

  7. 从零学React Native之07View

    View 组件是React Native最基本的组件.绝大部分其他React Native 组件. View组件的颜色和边框 backgroundColor 键用来指定颜色. RN 0.19版本开始, ...

  8. 从零学React Native之12 组件的生命周期

    一个React Native组件从它被加载,到最终被卸载会经历一个完整的生命周期.所谓生命周期,就是一个对象从开始生成到最后消亡所经历的状态,理解生命周期,是合理开发的关键. ES6语法和之前的ES5 ...

  9. 从零学React Native之10Text

    在React Native开发中,所有需要显示的字符串文本都需要放置在Text或者Text的子组件中.虽然在之前的文章中多次使用了Text组件,但是Text组件还是值得专门学习的, 并没有想象中的那么 ...

随机推荐

  1. Django之ORM多表操作

    1.创建一对多: 1.外键建在多的一方(如:一个出版社可出版多本书,所以建在书的表) 2.创建表: 1.创建外键 2.关联的表名 2.一对多数据的操作 2.1数据的添加: 第一种方法: 第二种方法: ...

  2. Python 原生2种 邮件发送(发送验证码) 的方法

    import smtplib from email.mime.text import MIMEText # 第三方 SMTP 服务 mail_host = "smtp.sina.cn&quo ...

  3. jdbc原始连接

    public class JdbcInstrt { public static void main(String[] args) { Connection conn = null; PreparedS ...

  4. CSS3实现3D地球自转行星公转

    截图效果:实际效果是动态的:地球自西向东自转,行星绕着地球公转,轨道也会转动 HTML页面代码: <!DOCTYPE html> <html lang="en"& ...

  5. nginx日志字段解析

    许包含的变量注释如下: $remote_addr, $http_x_forwarded_for 记录客户端IP地址 $remote_user 记录客户端用户名称 $request 记录请求的URL和H ...

  6. [jnhs]id字段修改错误导致hibernate hql查询整表只返回第一条数据

    调试发现,查询到的就是一条数据 hql语句执行结果 Hibernate: select ballmodel0_.ball_id as ball_id1_1_, ballmodel0_.color as ...

  7. jnhs[未解决]无法使用选定的hibernate配置文件建立数据库连接.请验证hibernate.cfg.xml中的数据库连接详情信息

    工程可以正常的使用读写数据库,当然model和model.hbm.xml文件是自己写的. 解决中

  8. maven安装教程(Idea)

    下载网址:https://maven.apache.or 点击Download 根据需要下载需要的版本 1.解压下载好的安装包放入新创建的maven文件夹中 2.在系统变量中添加环境变量(建议改成M2 ...

  9. 洛谷 P1951 收费站_NOI导刊2009提高(2) 最短路+二分

    目录 题面 题目链接 题目描述 输入输出格式 输入格式 输出格式 输入输出样例 输入样例: 输出样例: 说明 思路 AC代码 总结 题面 题目链接 P1951 收费站_NOI导刊2009提高(2) 其 ...

  10. (转)Json在Unity中的简单使用

    Json数据解析在Unity3d中的应用 最近做项目过程中因为Json文件名写错了一个字母Unity报错,找错误找到半夜,当时为了验错,写了一个小Demo,正好借此总结一下Json. 1.什么是Jso ...