因为团队技术栈变更为react native,所以开始写起了rn的代码,虽然rn与react份数同源,但是由于有很多native有关的交互和变动,实际使用还是碰到蛮多问题的,于是便有了这个系列,本来第一篇应该是讲如何构建开发调试环境,不过信息量过大,而且笔者对目前的开发调试环境并不算太满意,所以这里权且按下不表,便从遇到的第一个完整解决的问题开始行文吧。

  其实需求很简单,就是实现多个input组件,允许用户输入多组数据,在用户有输入内容的时候,右侧出现一个“清除”按钮,当用户点击之后,就清除之前输入的内容,样式如下:

  写了和在H5中基本一致的react代码之后,在native中表现却有些奇怪:

  因为在input中有数据的情况下,手机默认是弹起键盘的,而用户尝试点击“清除”按钮的时候,第一次会默认收起键盘,第二次点击才会让清除功能生效

  虽然逻辑上感觉这种逻辑并没有什么问题,但是交互上的体验太奇怪了,经过查询发现,是笔者将input组件嵌套于ScrollView组件中导致的,因为RN中ScrollView组件在设计中考虑是默认是否在点击时就收起软键盘(比如要触发滚动),而它的默认状态是收起,但是在笔者的场景中,笔者却不希望这样的“特性”生效,查阅文档发现,需要设置这个属性:

  当设置为handled时,当点击事件被子组件捕获时,键盘不会自动收起。

  不过仅仅设置还不够,因为现在键盘不会收起了,我们需要主动的触发键盘收起的事件,即我们需要在ScrollView内添加TouchableWithoutFeedback组件,给它添加一个onPresss事件,在响应的时候调用Keyboard.dismiss()。

  整个体验就好多了代码如下图所示:

  1. <ScrollView keyboardShouldPersistTaps="handled">
  2. <TouchableWithoutFeedback style={{flex: 1}} onPress={()=>{
  3. Keyboard.dismiss();
  4. }}
         
  5. <InputItems />
  6. ......
  7. <InputItems />
  8. </TouchableWithoutFeedback>
  9. </ScrollView>

  其中InputItems是笔者自定义的组件容器(也就是上面说的带一个“清除”按钮的TextInput组件)。

  在行文结束之前,笔者又碰到了一个RN text组件在android上“不正常换行”问题(和H5的现象还挺像),不过RN并没有类似“word-wrap”的属性,具体要怎么修复又得细细的翻文档了。。

【react native】rn踩坑实践——从输入框“们”开始的更多相关文章

  1. 初识React Native,踩坑之旅....

    开启Genymotion Android模拟器后 1.运行“react-native run-android”报端口冲突....解决方法: 2.运行“react-native run-android” ...

  2. 第一个React Native程序踩到的那些坑

    毫不夸张的说用React Native写一个Hello World !程序是我碰到最复杂的Hello World.网络上的有关的环境搭建相关的文档也很多,但是总是有这样那样的问题. 官方中文版的安装文 ...

  3. 关于React Native的那些坑

    好久没写博客了,特地把之前接触React Native时遇到的坑总结一下. 初始化一个React Native项目时,可能会遇到以下这些坑: 1.项目版本号与安卓模拟器中安装的 compileSdkV ...

  4. RN踩坑

    使用夜神 使用夜神作为模拟器,这个模拟器启动就会监听62001端口. 开发工具与模拟器的通信都是通过adb.夜神模拟器的安装目录/bin下有一个adb.exe,android sdk tools下也有 ...

  5. react native遇到的坑

    1.模拟器报错no bundle url present https://github.com/facebook/react-native/issues/12754 http://www.cnblog ...

  6. react native 遇到的坑

    1.项目中新加入组件,应执行npm install命令 2.项目执行react-native run-android 报错,应进入android目录,执行gradlew.bat clean命令 3.L ...

  7. react native( rn) 中关于navigationOptions中headerRight 获取navigation的问题 rn

    使用以下代码获取navigation static navigationOptions = ({ navigation, navigationOptions }) => { const { pa ...

  8. 记录VSCode开发React Native的一些坑

    当我们点Debug Android时,会弹出以下错误 Could not debug. Unable to set up communication with VSCode react-native ...

  9. Kubernetes-Service介绍(三)-Ingress(含最新版安装踩坑实践)

    前言 本篇是Kubernetes第十篇,大家一定要把环境搭建起来,看是解决不了问题的,必须实战. Kubernetes系列文章: Kubernetes介绍 Kubernetes环境搭建 Kuberne ...

随机推荐

  1. firedac数据集的序列和还原

    procedure TForm1.Button1Click(Sender: TObject);var stream, stream2: TMemoryStream; buf: TBytes;begin ...

  2. volatile关键字解析&内存模型&并发编程中三概念

    原文链接: http://www.cnblogs.com/dolphin0520/p/3920373.html volatile这个关键字可能很多朋友都听说过,或许也都用过.在Java5之前,它是一个 ...

  3. sdk manager 创建的虚拟机启动的时候总是在Android字样解决

    一直显示Android字样.仅仅须要删除文件夹下的snapshots.img 找到sdk的文件夹下的\tools\lib\emulator,然后删除上面的文件snapshots.img就可以,我的sd ...

  4. 数据结构-二叉树的遍历(类C语言描写叙述)

    遍历概念     所谓遍历(Traversal)是指沿着某条搜索路线.依次对树中每一个结点均做一次且仅做一次訪问.訪问结点所做的操作依赖于详细的应用问题. 遍历是二叉树上最重要的运算之中的一个,是二叉 ...

  5. 内存充足,但是为什么hadoop3无法启动nodemanager

    [root@hadoop3 hadoop]# xloStarting namenodes on [hadoop3]上一次登录:三 12月 27 16:06:01 CST 2017pts/24 上Sta ...

  6. browser user agent

    乐视X501 UC浏览器1080x1920x32Mozilla/5.0 (Linux; U; Android 5.0.2; zh-CN; Letv X501 Build/DBXCNOP55013041 ...

  7. mysql 查询语句去重 通过sql去重

    url 在表中具有唯一性: 由于定时任务的多进程/代码的多线程/定时任务的调度/脚本的执行时间,导致,破坏了唯一性: SELECT COUNT(1) FROM test_error_tmpUNION ...

  8. bzoj1486【HNOI2009】最小圈

    1486: [HNOI2009]最小圈 Time Limit: 10 Sec  Memory Limit: 64 MB Submit: 1778  Solved: 827 [Submit][Statu ...

  9. XML简单介绍及举例

    可扩展标记语言(eXtensibleMarkup Language,简称XML).是一种标记语言.标记指计算机所能理解的信息符号.通过此种标记,计算机之间能够处理包括各种信息的文章等. 怎样定义这些标 ...

  10. 设计模式-(17)策略模式 (swift版)

    一,概念: 策略模式定义了一系列的算法,并将每一个算法封装起来,而且使他们可以相互替换,让算法独立于使用它的客户而独立变化. 二,使用场景 1.针对同一类型问题的多种处理方式,仅仅是具体行为有差别时: ...