RN 踩坑指南合集

  1. Text 中英文不居中

不设置 line-height,但是要考虑文本和文本的间隔就要和设计有偏差,不设置 line-height 不代表 Text 没有额外的 height

  1. 图片本地加载没有问题,测试环境就不可以

对于小图使用 base64,有些 cdn 路径并没有访问对,曾经遇到

  1. 测试环境有图片,正式环境没有图片

cdn 图片路径并没有访问对,需要修改地址路径

  1. RN 截屏功能,webview 不能截屏

安卓截屏,不能截 Image,必须是 View,View 还要设置collapsable设置为 false,但是当collapsable为 false ,一些低端安卓机就渲染不出来了

如果有带参数的截屏功能(每个人访问的是不一样的),目前这种需求还是给端上提比较好。

base64 遇到不能转成图片,是因为base64 有一些换行符,去掉就可以了。

截屏 ios 保存 ,如果图片长宽比比较小的话,可能会被放大,属于正常现象。

  1. CSS 0.5 border 宽度,在安卓 5 webview 上不会被渲染出来

判断是否是 web 环境安卓 5,设置成 1 兜底

  1. 图片预加载 react-native-fast-image 这个插件有 bug

采用绝对定位和相对定位,两张图片叠加的方式,等图片加载完成设置透明度为1

  1. RN 原本 modal 在 webview 上是不能弹出的

需要自己额外写一套,使用公共组件

  1. RN 安卓样式,子元素定位父元素是不能超出去的,比如

如下的图,父元素的长款就必须包含子元素

image
  1. 如果 View 要包裹 TouchableOpacity,View 的样式会乱

需要把 View 的样式放到 TouchableOpacity,对于 TouchableWithoutFeedback 不用移动样式

  1. 安卓机下载 charles 证书如何安装

下载后的证书并不能直接打开安卓会出错,在设置里面打开相关证书添加,访问本地文件添加信任

  1. CSS webview position 绝对定位的时候

left: 0, top: 0, 这两个都不要丢,有些低端安卓 webview 渲染有问题

绝对定位的时候,如果是 btn 需要点击的 view 等,设置 index 大一点,在某些安卓机点击不到

  1. 父元素是 relative ,子元素既有 relative 和 absolute

把 absolute 的往前面写,有些低端安卓 webview 渲染方式不大对,后面 absolute 就直接往后面渲染

  1. 小米手机上存在文字截断的问题

居中对齐的Text在水平方向上会缺失最后一个字

设置了行高的Text在垂直方向上最后一行会被截断

原因:小米使用了自定义的字体,从而造成了该问题

解决方案 :

针对android设备统一把字体设置成android默认字体 fontFamily: 'DroidSansFallback'

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容