【react-native】持续踩坑总结
陆陆续续的已经接触了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】持续踩坑总结的更多相关文章
- 初识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 ...
- react native遇到的坑
1.模拟器报错no bundle url present https://github.com/facebook/react-native/issues/12754 http://www.cnblog ...
- NetCore持续踩坑
坑1: vs2017 安装 .netcore2.2.2后,新建项目编译报错:.NET SDK 不支持降.NET Core2.2 设置为目标. 我以为是.netcore的sdk版本有误,于是我查看.ne ...
- 【pytorch】持续踩坑 & 错误解决经历
报错 1.[invalid argument 0: Sizes of tensors must match except in dimension 0.] {出现在 torch.utils.data. ...
- react native 遇到的坑
1.项目中新加入组件,应执行npm install命令 2.项目执行react-native run-android 报错,应进入android目录,执行gradlew.bat clean命令 3.L ...
- 记录VSCode开发React Native的一些坑
当我们点Debug Android时,会弹出以下错误 Could not debug. Unable to set up communication with VSCode react-native ...
- 给所有开发者的React Native详细入门指南
建议先下载好资料后,再阅读本文.demo代码和资料下载 目录 一.前言 二.回答一些问题 1.为什么写此教程 2.本文适合哪些人看 3.如何使用本教程 4.需要先学习JavaScript.HTML.C ...
随机推荐
- 碧砚适合佳能328 4452 ICD520 4472 4450 硒鼓4700一体机墨盒4770
- 学习LaTex
MarkDown+Latex 本来想学习latex编辑公式的,在博客园内置的MarkDown编辑器已经支持Latex公式解析了,如下: $$x=\frac{-b\pm\sqrt{b^2-4ac}}{2 ...
- IntelliJ 中类似于Eclipse ctrl+o的是ctrl+F12
IntelliJ 中类似于Eclipse ctrl+o的是ctrl+F12 学习了:https://blog.csdn.net/sjzylc/article/details/47979815
- SpringBoot初始教程之项目结构(一)
SpringBoot初始教程之项目结构 1 简介 spring Boot makes it easy to create stand-alone, production-grade Spring ba ...
- hibernate4中HHH000273的错误
今天配置hibernate4.发现报 17:55:06,815 INFO AbstractPoolBackedDataSource:522 - Initializing c3p0 pool... co ...
- 各项异性滤波简单介绍Anisotropic Filtering(AF)
本文主要整理简绍来自互联网的各项异性滤波的知识. 原文链接:http://www.linuxgraphics.cn/graphics/using_anisotropic_texture_filteri ...
- 远程调试 Asp.Net 项目
项目部署到产品环境后,难免会发生一些故障,有一些可以在本地测试环境中直接重现,而有一些则无法重现.对于可以在本地测试环境中重现的Bug,开发人员往往能够很迅速地进行问题排查.而对于无法重现的Bug,就 ...
- #include "*.c"文件的妙用
今天我在看代码的时候突然看到在一个.c文件里包括了#include "*.c"代码,这个让我非常诧异,然后google了一下.才发现是这么回事情.以下我写了一个測试代码.我相信你看 ...
- NPOI解析Excel
园子的文章: http://www.cnblogs.com/csqb-511612371/category/654604.html 关键就是如何解析Excel表头,特别是合并单元格的..还有对应NPO ...
- 关于wireshark
1 对https进行抓包,或者说抓包经过了ssl加密的包 只要有rsa private key就可以了. https://wiki.wireshark.org/SSL 2 对浏览器访问的https的网 ...