陆陆续续的已经接触了RN快3个月,整体的感受。。。感觉在调试兼容andorid问题的时候就像回到了IE时代。

  本来想按自己踩坑的路径持续更新一些记录,但是,现实是坑太多,还是统一写一篇汇总一下吧(鉴于笔者的接触时间并不长,所以,不免理解不对之处,还望指正):

  1、overflow:hidden; 这个属性前端工程师应该都很熟悉,fb的团队在rn中也支持了这个属性,但是虽然RN实现了这个属性,但是它的支持却并不太好,直到笔者最近使用的RN 0.53.3的版本,这个bug依然存在。。导致android上并不能设置overflow的属性,始终为hidden;如何解决呢?可以参考第三点的方法。

  2、border: 1px dashed #000; 这是一个设置边框的属性,与我们常用的设置“实线(也就是border-style:solid)”不同,它是设置为虚线,但是这货在android上压根就不支持。。而在ios上也不能支持对单边的设置,必须四周都要保证同样的border-style border-color,才能够正常显示;

  如何解决这种问题呢?android笔者的团队最终使用图片来hack了,而ios需要模拟单边的dashed bodrder则可以利用它本身已经有的能力,绘制一个height:1的容器,设置它的border,再设置它的overflow:hidden,则正好实现了单像素的边框。

  3、zIndex: number; 这个也是一个很熟悉的属性了,不过在rn中,它的实现和web又不太一样,但是实现上有些类似

<>
<Header />
<ParentComponent>
<ComponentA />
<ComponentB />
</ParentComponent>
<Footer />
</>

  比如以上这个代码片段,在css中我们可以通过设置postition来强制提高Component*的层级,但是在rn中,层级是由嵌套结构决定的,也就是说如果ParentComponent只有100*100的显示区域,那么它的子组件A、B是无法超出这个显示区域显示的,当然可以使用rn提供的组件modal,不过这个组件笔者在android 8.0又有一个奇怪的bug,而且官方目前还没修复;另外一种是常用的方式是自己基于RN提供的DeviceEventEmitter去驱动早就设置好的一个高层级组件容器去显示,形如:

<>
<Header />
<ParentComponent>
<ComponentA />
<ComponentB />
</ParentComponent>
<Footer />
<MyModal />
</>

  把需要跨层显示的元素挂载到MyModal上,通过它在物理层上的本来的高层级来实现。

  4、console;console应该是前端同学用得特别多的对象,所以fb也贴心的在rn中实现了,对调试确实有蛮大的帮助,但是这个东西,本身的性能并不好(其中很多概念就不展开了,笔者也没有完全摸清),所以官方建议是在上线的时候移除console,不过。。似乎官方提供的babel-no-console plugin并不能很好的移除所有console。。。于是通常会用一个比较原始的方式:  

for(let key in console){
console[key] = ()=>{};
}

  5、TouchableXXX;RN中为了方便响应用户事件(如点击)的交互,产生了一些新的组件TouchableHighlight、TouchableNativeFeedback、TouchableOpacity等,它们会封装一些默认的交互,类似web端的active效果,不过实测发现TouchableHighlight在响应事件的同时在android上存在着会把处于padding逾期的元素隐藏的bug;笔者的解决方法是使用TouchableOpacity来代替,在直观效果上其实两者区别不大,除非是很特殊的场景,一般还是可以应用的。

  

  暂时先写到这里吧,因为天天都在踩,后面再持续更新。

    

【react-native】持续踩坑总结的更多相关文章

  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. react native遇到的坑

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

  5. NetCore持续踩坑

    坑1: vs2017 安装 .netcore2.2.2后,新建项目编译报错:.NET SDK 不支持降.NET Core2.2 设置为目标. 我以为是.netcore的sdk版本有误,于是我查看.ne ...

  6. 【pytorch】持续踩坑 & 错误解决经历

    报错 1.[invalid argument 0: Sizes of tensors must match except in dimension 0.] {出现在 torch.utils.data. ...

  7. react native 遇到的坑

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

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

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

  9. 给所有开发者的React Native详细入门指南

    建议先下载好资料后,再阅读本文.demo代码和资料下载 目录 一.前言 二.回答一些问题 1.为什么写此教程 2.本文适合哪些人看 3.如何使用本教程 4.需要先学习JavaScript.HTML.C ...

随机推荐

  1. java.lang.ClassNotFoundException: org.springframework.web.servlet.DispatcherServlet

    新建Maven 项目的时候报错: java.lang.ClassNotFoundException: org.springframework.web.servlet.DispatcherServlet ...

  2. canvas仿芝麻信用分仪表盘

    这是一个仿支付宝芝麻信用分的一个canvas,其实就是一个动画仪表盘. 首先, 上原图: 这个是在下支付宝上的截图,分低各位见笑了.然后看下我用canvas实现的效果图: <canvas id= ...

  3. eclipse bug之'<>'operator is not allowed for source level below 1.7

    eclipse中导入工程,报这个错'<>'operator is not allowed for source level below 1.7,把jdk改成1.7后,提示Android r ...

  4. CentOS 7下安装Logstash ELK Stack 日志管理系统(上)

    介绍 The Elastic Stack - 它不是一个软件,而是Elasticsearch,Logstash,Kibana 开源软件的集合,对外是作为一个日志管理系统的开源方案.它可以从任何来源,任 ...

  5. Windows和linux双系统——改动默认启动顺序

    电脑上装了Windows 7和Ubantu双系统,因为Linux系统用的次数比較少而且还是默认的启动项对此非常不能容忍,因此得改动Windows为默认的启动项. 因为电脑上的系统引导程序是GRUB,因 ...

  6. Lucene中TokenStream,Tokenizer,TokenFilter,TokenStreamComponents与Analyzer

    TokenStream extends AttributeSource implements Closeable: incrementToken,end,reset,close Tokenizer直接 ...

  7. 安装SQLserver2008时出现的错误

    1.SQLserver2008提示必须重新启动计算机才干够继续安装.解决方法例如以下: 在開始->执行中输入regedit,到HKEY_LOCAL_MACHINE\SYSTEM\CurrentC ...

  8. sdut 面向对象程序设计上机练习四(变量引用)

    面向对象程序设计上机练习四(变量引用) Time Limit: 1000MS Memory limit: 65536K 题目描写叙述 将变量的引用作为函数形參,实现2个int型数据交换. 输入 输入2 ...

  9. 扩展HtmlHelper

    eg3:扩展HtmlHelper                                扩展方法类 1 public static class HtmlExtension 2 { 3 /// ...

  10. Posting array of JSON objects to MVC3 action method via jQuery ajax

    Does the model binder not suport arrays of JSON objects? The code below works when sending a single ...