陆陆续续的已经接触了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. 【.Net Core 学习系列】-- 自定义错误页面在IE浏览器中不能正常显示

    测试场景: 1. 新建.Net Core Web项目 2. 选择模板: 3. 修改Error页面代码:(去掉母版页并修改页面显示信息) 4. 修改[ASPNETCORE_ENVIRONMENT],并抛 ...

  2. 如何使用sqlalchemy获取某年某月的数据总和

    代码如下: # 基于Flask的SQLAlchemy # models class History(db.Model): __tablename__ = 'historys' id = db.Colu ...

  3. 学习Centos 7的笔记

    Step-1 yum install epel-release && yum clean all && yum update –y &&  yum -y ...

  4. 一天教你入门struts2

    写在前面 自己也是一个java和java web的菜鸟.之前没有接触过java web方面的开发 想通过一个小项目,来熟悉struts2的开发流程 一个有趣的想法源于教研室项目上的一个功能实现–自己主 ...

  5. Xpath—解决这个问题的良药

    何为良药? 因为在XML中存在一些问题和缺陷,针对这些问题就产生了响应的解决方式.如: getElementById方法在解析XML时因为一些原因适不适合的: 首先XML中每一个元素节点不一定有id属 ...

  6. [Zlib]_[0基础]_[使用zlib库压缩文件]

    场景: 1. WIndows上没找到系统提供的win32 api来生成zip压缩文件, 有知道的大牛麻烦留个言. 2. zlib比較经常使用,编译也方便,使用它来做压缩吧. MacOSX平台默认支持z ...

  7. angular react vue 浏览器兼容情况汇总

    一.逻辑层 框架 (1)angular Angular早在1.3版本就抛弃了对ie8的支持. (2)react React 早在0.14.x 版本就抛弃了对ie8的支持. (3)vue Vue就没打算 ...

  8. VS自己定义project向导开发(Custom Wizard)

     在vs2010中定制VC++project向导有例如以下两种方式: 改动现有向导.以满足自己的须要: 使用"自己定义向导"来产生一个向导骨架,并设计自己的向导. 本文档仅仅讨 ...

  9. 开源yYmVc项目,邀您和我一起开发:)

    打算在闲暇时间写个MVC框架,要有什么功能一步一步边写边加,仿照struts 2 和 spring mvc.假设您感兴趣的话,能够私密我,给您加入key:). 欢迎您的到来~ 项目放在基于GIT的CS ...

  10. C# 谁改了我的代码 使用 Resharper 快速做适配器

    C# 谁改了我的代码   本文告诉大家一个特殊的做法,可以修改一个字符串常量 我们来写一个简单的程序,把一个常量字符串输出 private const string str = "linde ...