react native TextInput
今天我想说一下react native中的一个控件,TextInput 翻译过来就是文本输入,对应着android中的EditText。我们先看一下官方是怎样描述的。TextInput是一个允许用户在应用中通过键盘输入文本的基本组件。本组件的属性提供了多种特性的配置,譬如自动完成、自动大小写、占位文字,以及多种不同的键盘类型(如纯数字键盘)等等。具体的我也不多说了,大家可以到官网中看看:http://reactnative.cn/ (中文版的)。
今天我主要是想说的是我当时用这个的时候,遇到一个问题,也许很多人会和我遇到的相同。有时候,我们会遇到这个需求,初始化的时候,textinput需要展示一些内容在输入框中,当然这个和提示语不同,就是要展示一些内容到输入框中,在官网上,textinput中有一个属性value,这个属性就是显示内容到输入框中。而我当时遇到什么问题呢,第一:刚刚开始是获取不到焦点,第二:另一个就是你明明是已经输入值了,可是看不到,但是你可以获取得到你输入的值。很奇怪,后来我是怎么解决的呢,
我先说第一个问题,很简单,主要给这个textinput设置一个宽度就好了。第二个问题是我当时对这个state理解不当造成的。我当时设置的是这样设置的value={this.state.**},导致怎么输入,都是显示原来的值。后面对这个state理解深入一点以后,才知道应该这样设置,才可以value = this.setState{**:**}这种设置方式才成功。
react native TextInput的更多相关文章
- React Native - TextInput详细解说
1,TextInput组件介绍 TextInput 组件除了作为输入框实现基本的输入功能外,它还提供了许多其他功能,比如自动校验.占位符以及指定弹出不同的键盘类型等. 2,组件的属性 (1)autoC ...
- React Native 之 TextInput使用
前言 学习本系列内容需要具备一定 HTML 开发基础,没有基础的朋友可以先转至 HTML快速入门(一) 学习 本人接触 React Native 时间并不是特别长,所以对其中的内容和性质了解可能会有所 ...
- React Native 组件之TextInput
React Native 组件之TextInput类似于iOS中的UITextView或者UITextField,是作为一个文字输入的组件,下面的TextInput的用法和相关属性. /** * Sa ...
- React Native控件只TextInput
TextInput是一个允许用户在应用中通过键盘输入文本的基本组件.本组件的属性提供了多种特性的配置,譬如自动完成.自动大小写.占位文字,以及多种不同的键盘类型(如纯数字键盘)等等. 比如官网最简单的 ...
- react native 封装TextInput组件
上一篇 react-native文章提到了TextInput组件对安卓的适配问题,因此对该组件进行封装很有必要. 文章地址 react native定报预披项目知识点总结 TextInput介绍 官 ...
- React Native之TextInput的介绍与使用(富文本封装与使用实例,常用输入框封装与使用实例)
React Native之TextInput的介绍与使用(富文本封装与使用实例,常用输入框封装与使用实例) TextInput组件介绍 TextInput是一个允许用户在应用中通过键盘输入文本的基本组 ...
- React Native(十三)——ios键盘挡住textInput
渐入佳境 用React Native重构的项目也快接近尾声,剩下的就是适配ios的功能了.慢慢地也从中琢磨出了一点门道,于是就遇见了键盘遮挡textInput问题斑斑: 正常页面: android点击 ...
- [RN] React Native 键盘管理 在Android TextInput遮盖,上移等问题解决办法
React Native 键盘管理 在Android TextInput遮盖,上移等问题解决办法 解决办法: 打开android工程,在AndroidManifest.xml中配置如下: <ac ...
- [React Native]高度自增长的TextInput组件
之前我们学习了从零学React Native之11 TextInput了解了TextInput相关的属性. 在开发中,我们有时候有这样的需求, 希望输入区域的高度随着输入内容的长度而增长, 如下: 这 ...
随机推荐
- 微信小程序之明源商城系列-01-商城介绍及开发准备
1,效果展示 数据来自于写的一个小爬虫爬了明源商城部分的数据.由于价格的保密性,下列产品价格和真实的都不同. 1.1 主页及开发文件结构 1.2 产品的详细页面 1.2 产品分类页面 1.3 产品 ...
- Raspberry Pi 3 --- GPIO control
Before input 'gpio readall', need install wiringPi download "wiringPi":git clone git://git ...
- SaaS模式的软件
SaaS是Software-as-a-Service(软件即服务)的简称,随着互联网技术的发展和应用软件的成熟, 在21世纪开始兴起的一种完全创新的软件应用模式.它与"on-demand ...
- fedora 24 使用扇贝网页版没有声音
(扇贝的官方答疑:https://www.shanbay.com/help/faq/no_voice/) 第4步下载MP3测试文件没办法使用: 似乎因为MP3格式的文件是的版权问题. 打算安装能处理M ...
- centos6.5升级python为2.7
今天线上服务器全部升级python环境为python-2.7.6的环境,我采用的方法是ansible+shell,代码如下,友提,Python-2.7.6.tgz.setuptools-14.3.1. ...
- [Unity3d]向量的过度方法以及拖尾效果
Vector3.RotateTowards() 用法 public static function RotateTowards(current: Vector3, target: Vector3, m ...
- apache启动出错原因举例
这是我这两天频繁遇到的问题.Apache服务器还真是问题少年!任何点改动都可能导致它无法使用. 原因一:80端口占用例如IIS,另外就是迅雷.我的apache服务器就是被迅雷害得无法启用! 原因二:软 ...
- MYSQL提权方法
cve-2016-6662 MYSQL提权分析 MySQL <= 5.7.15 远程代码执行/ 提权 (0day) 5.6.33 5.5.52 Mysql分支的版本也受影响,包括: MariaD ...
- ThinkPhp 验证码不显示图片
验证码不显示原因分析: 1.先确保是否开启了 gd库 2.页面是否存在bom头 3.导入的ORG.Util.Image是否存在 4.入口文件中是否有define('APP_DEBUG', TRUE); ...
- php 去掉字符串的最后一个字符
原字符串1,2,3,4,5,6, 去掉最后一个字符",",最终结果为1,2,3,4,5,6 代码如下: $str = "1,2,3,4,5,6,"; $news ...