【react native】rn踩坑实践——从输入框“们”开始
因为团队技术栈变更为react native,所以开始写起了rn的代码,虽然rn与react份数同源,但是由于有很多native有关的交互和变动,实际使用还是碰到蛮多问题的,于是便有了这个系列,本来第一篇应该是讲如何构建开发调试环境,不过信息量过大,而且笔者对目前的开发调试环境并不算太满意,所以这里权且按下不表,便从遇到的第一个完整解决的问题开始行文吧。
其实需求很简单,就是实现多个input组件,允许用户输入多组数据,在用户有输入内容的时候,右侧出现一个“清除”按钮,当用户点击之后,就清除之前输入的内容,样式如下:
写了和在H5中基本一致的react代码之后,在native中表现却有些奇怪:
因为在input中有数据的情况下,手机默认是弹起键盘的,而用户尝试点击“清除”按钮的时候,第一次会默认收起键盘,第二次点击才会让清除功能生效。
虽然逻辑上感觉这种逻辑并没有什么问题,但是交互上的体验太奇怪了,经过查询发现,是笔者将input组件嵌套于ScrollView组件中导致的,因为RN中ScrollView组件在设计中考虑是默认是否在点击时就收起软键盘(比如要触发滚动),而它的默认状态是收起,但是在笔者的场景中,笔者却不希望这样的“特性”生效,查阅文档发现,需要设置这个属性:
当设置为handled时,当点击事件被子组件捕获时,键盘不会自动收起。
不过仅仅设置还不够,因为现在键盘不会收起了,我们需要主动的触发键盘收起的事件,即我们需要在ScrollView内添加TouchableWithoutFeedback组件,给它添加一个onPresss事件,在响应的时候调用Keyboard.dismiss()。
整个体验就好多了代码如下图所示:
- <ScrollView keyboardShouldPersistTaps="handled">
- <TouchableWithoutFeedback style={{flex: 1}} onPress={()=>{
- Keyboard.dismiss();
- }}
- <InputItems />
- ......
- <InputItems />
- </TouchableWithoutFeedback>
- </ScrollView>
其中InputItems是笔者自定义的组件容器(也就是上面说的带一个“清除”按钮的TextInput组件)。
在行文结束之前,笔者又碰到了一个RN text组件在android上“不正常换行”问题(和H5的现象还挺像),不过RN并没有类似“word-wrap”的属性,具体要怎么修复又得细细的翻文档了。。
【react native】rn踩坑实践——从输入框“们”开始的更多相关文章
- 初识React Native,踩坑之旅....
开启Genymotion Android模拟器后 1.运行“react-native run-android”报端口冲突....解决方法: 2.运行“react-native run-android” ...
- 第一个React Native程序踩到的那些坑
毫不夸张的说用React Native写一个Hello World !程序是我碰到最复杂的Hello World.网络上的有关的环境搭建相关的文档也很多,但是总是有这样那样的问题. 官方中文版的安装文 ...
- 关于React Native的那些坑
好久没写博客了,特地把之前接触React Native时遇到的坑总结一下. 初始化一个React Native项目时,可能会遇到以下这些坑: 1.项目版本号与安卓模拟器中安装的 compileSdkV ...
- RN踩坑
使用夜神 使用夜神作为模拟器,这个模拟器启动就会监听62001端口. 开发工具与模拟器的通信都是通过adb.夜神模拟器的安装目录/bin下有一个adb.exe,android sdk tools下也有 ...
- react native遇到的坑
1.模拟器报错no bundle url present https://github.com/facebook/react-native/issues/12754 http://www.cnblog ...
- react native 遇到的坑
1.项目中新加入组件,应执行npm install命令 2.项目执行react-native run-android 报错,应进入android目录,执行gradlew.bat clean命令 3.L ...
- react native( rn) 中关于navigationOptions中headerRight 获取navigation的问题 rn
使用以下代码获取navigation static navigationOptions = ({ navigation, navigationOptions }) => { const { pa ...
- 记录VSCode开发React Native的一些坑
当我们点Debug Android时,会弹出以下错误 Could not debug. Unable to set up communication with VSCode react-native ...
- Kubernetes-Service介绍(三)-Ingress(含最新版安装踩坑实践)
前言 本篇是Kubernetes第十篇,大家一定要把环境搭建起来,看是解决不了问题的,必须实战. Kubernetes系列文章: Kubernetes介绍 Kubernetes环境搭建 Kuberne ...
随机推荐
- firedac数据集的序列和还原
procedure TForm1.Button1Click(Sender: TObject);var stream, stream2: TMemoryStream; buf: TBytes;begin ...
- volatile关键字解析&内存模型&并发编程中三概念
原文链接: http://www.cnblogs.com/dolphin0520/p/3920373.html volatile这个关键字可能很多朋友都听说过,或许也都用过.在Java5之前,它是一个 ...
- sdk manager 创建的虚拟机启动的时候总是在Android字样解决
一直显示Android字样.仅仅须要删除文件夹下的snapshots.img 找到sdk的文件夹下的\tools\lib\emulator,然后删除上面的文件snapshots.img就可以,我的sd ...
- 数据结构-二叉树的遍历(类C语言描写叙述)
遍历概念 所谓遍历(Traversal)是指沿着某条搜索路线.依次对树中每一个结点均做一次且仅做一次訪问.訪问结点所做的操作依赖于详细的应用问题. 遍历是二叉树上最重要的运算之中的一个,是二叉 ...
- 内存充足,但是为什么hadoop3无法启动nodemanager
[root@hadoop3 hadoop]# xloStarting namenodes on [hadoop3]上一次登录:三 12月 27 16:06:01 CST 2017pts/24 上Sta ...
- browser user agent
乐视X501 UC浏览器1080x1920x32Mozilla/5.0 (Linux; U; Android 5.0.2; zh-CN; Letv X501 Build/DBXCNOP55013041 ...
- mysql 查询语句去重 通过sql去重
url 在表中具有唯一性: 由于定时任务的多进程/代码的多线程/定时任务的调度/脚本的执行时间,导致,破坏了唯一性: SELECT COUNT(1) FROM test_error_tmpUNION ...
- bzoj1486【HNOI2009】最小圈
1486: [HNOI2009]最小圈 Time Limit: 10 Sec Memory Limit: 64 MB Submit: 1778 Solved: 827 [Submit][Statu ...
- XML简单介绍及举例
可扩展标记语言(eXtensibleMarkup Language,简称XML).是一种标记语言.标记指计算机所能理解的信息符号.通过此种标记,计算机之间能够处理包括各种信息的文章等. 怎样定义这些标 ...
- 设计模式-(17)策略模式 (swift版)
一,概念: 策略模式定义了一系列的算法,并将每一个算法封装起来,而且使他们可以相互替换,让算法独立于使用它的客户而独立变化. 二,使用场景 1.针对同一类型问题的多种处理方式,仅仅是具体行为有差别时: ...