React Native组件(四)TextInput组件解析

1 概述

TextInput组件和Text组件类似,内部都没有使用FlexBox布局,不同的是TextInput组件支持文字的输入,因为支持文字输入, TextInput组件要比Text组件多了一些属性和方法。TextInput组件支持Text组件所有的Style属性,而TextInput组件本身是没有特有的Style属性的。

2 属性

TextInput组件支持所有的View组件的属性,除此之外,它还有许多其他属性。

2.1 onChangeText

当输入框的内容发生变化时,就会调用onChangeText。 index.android.js

上面的例子我们用到了TextInput组件的onChangeText属性,当我们在TextInput中输入内容时,这个内容就会通过onChangeText的参数text传递回来,在onChangeText中将text的内容保存到state中。当我们点击Button时,通过Alert将state中保存的内容展现出来。

运行程序效果如下图所示。

在输入框中输入Android,点击搜索Button,可以看到输入的Android展示到了Alert中。

2.2 onChange

当输入框的内容发生变化时,也会调用onChange,只不过它所返回的参数是一个event,我们来改写2.1的代码:

通过event.nativeEvent.text可以得到用户输入的内容,如果只是想要得到用户输入的内容,还是用onChangeText比较合适。

2.3 keyboardType

keyboardType用于设置弹出软键盘的类型。它的取值为范围为: enum(‘default’, ‘email-address’, ‘numeric’, ‘phone-pad’, ‘ascii-capable’, ‘numbers-and-punctuation’, ‘url’, ‘number-pad’, ‘name-phone-pad’, ‘decimal-pad’, ‘twitter’, ‘web-search’) ,其中default、numeric、email-address和phone-pad是跨平台。

将keyboardType的值设置为phone-pad,效果如下图所示。

2.4 blurOnSubmit

如果blurOnSubmit值为true,文本框会在按下提交键时失去焦点。对于单行输入框,blurOnSubmit默认值为true,多行则为false。 在单行的情况下,点击键盘上的提交按钮时,TextInput的效果如下图所示。

将blurOnSubmit设置为false:

点击键盘上的提交按钮时,TextInput的效果如下图所示。

2.5 onSubmitEditing

当提交键被按下时会调用onSubmitEditing,如果multiline等于true,则此属性不可用。

运行程序并在App的开发菜单中选择Debug JS Remotely,这时我们输入Android并按下提交键,在Console控制台中就会输出结果。(笔者用的是WebStorm)

2.6 returnKeyType

用于设置软键盘回车键的样式,Android平台可以使用returnKeyLabel来设置软键盘回车键的内容。 returnKeyType的取值为enum(‘done’, ‘go’, ‘next’, ‘search’, ‘send’, ‘none’, ‘previous’, ‘default’, ‘emergency-call’, ‘google’, ‘join’, ‘route’, ‘yahoo’)。 其中跨平台的取值有:done、next、search、send。 Android平台独有:none、previous。 iOS平台独有:default、emergency-call、google、join、route、yahoo。 如果我们将returnKeyType设置为go时,效果如下图所示。

returnKeyType设置为send时,效果如下图所示。

2.7 其他跨平台属性

2.8 Android平台独有属性

2.9 iOS平台独有属性

3 方法

clear()

clear用于清空输入框的内容。 想要使用组件的方法则需要使用组件的引用,例子如下所示。

在TextInput标签中定义引用的名称:ref="textInputRefer",这样我们通过 this.refs.textInputRefer就可以得到TextInput 组件的引用。在Button的onPress函数中,调用了TextInput的clear方法,这样当我们点击“清除”按钮时,文本框中的内容就会被清除。

isFocused(): boolean

返回值表明当前输入框是否获得了焦点。

好了,到这里TextInput组件就介绍到这里,还有一些没有列出的属性请查看官方文档。

原文发布于微信公众号 - 刘望舒(liuwangshuAndroid)

原文发表时间:2017-08-22

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏代码世界

前端之HTML内容

一、HTML介绍 1、Web服务本质   当我们在浏览器中输入一个url后打开一个页面这个过程实质是一个网络编程中的sockt服务端接受指令并发送指令的一个过程...

33090
来自专栏ytkah

微信小程序开发教程第八章:微信小程序分组开发与左滑功能实现

先来看看今天的整体思路: 进入分组管理页面-->点击新建分组新建 进入到未分组页面基本操作 进入到已建分组里面底部菜单栏操作-->从名片夹中添加进行操作。 ? ...

38240
来自专栏谈补锅

html表单提交

1、只能为input、textarea、select三类类型的标签。只有这些标签用户才可能修改值,<label>、<p>、<font>等标签仅供显示用,没有提交...

26230
来自专栏贺贺的前端工程师之路

Angular2 之 结构型指令几个概念

两种用法。(* 与 template) 控制宿主元素的模板。 在哪里去显示,viewcontain 怎么注入,属性的set语法的使用,是便捷的监听属性值变化...

9520
来自专栏腾讯NEXT学位

小程序iOS客户端框架——控件事件逻辑框架与控件原生化(下)

? 小程序自发布以来,为开发者和用户提供了一种轻量级的App。作为一种不需要下载安装即可使用的应用,它实现了应用“触手可及”的梦想,用户扫一扫或者搜一下即可打...

21840
来自专栏Java后端技术

IntelliJ IDEA 15.0.4常用快捷键整理

  最近刚转了IDEA,感觉真是爽的一逼,太智能了,回不去Eclipse了,还有些淡淡的忧伤呢~在使用中很多的快捷键帮了开发的大忙,让我可以达到事半功倍的效果,...

9130
来自专栏程序员宝库

Chrome 浏览器必知必会的小技巧

来源:FEWY https://segmentfault.com/a/1190000012143176 说明 这篇文章主要介绍的就是一些chrome浏览器的小技...

49380
来自专栏偏前端工程师的驿站

JS魔法堂:LINK元素深入详解

一、前言                               我们一般使用方式为 <link type="text/css" rel="styleshe...

247100
来自专栏小文博客

wordpress指针样式自定义——美化你的blog

18840
来自专栏京东技术

Vue拖拽组件开发实例

vue是一套用于构建用户界面的渐进式框架。可以用他来封装单文件组件来开发更为复杂的单页应用。 本文主要是通过封装一个拖拽组件的例子,来分析Vue组件化相关知识。

942130

扫码关注云+社区

领取腾讯云代金券