如果你喜爱我的文章，心愿点赞👍 珍藏 📁 评论 💬 三连反对一下，谢谢你，这对我真的很重要！
React Native 开发时，如果只是写些简略的页面，基本上按着官网文档 reactnative.dev就能写进去，然而 React Native 的 API 有几百个，没有肯定的开发踩坑教训，面对一些新的需要时的确会抓不到重点。
本文总结了我集体开发 React Native 中遇到的问题和一些冷门的 API，如果有有缘人看到这篇文章并解决了理论问题，那就最好不过了。
<!–truncate–>
一、内置组件
本节内容次要是是对官网 React Native Core Components 内容的补充，次要是说一些让人开发体验不爽的中央，帮忙起初人避坑。
1.View
View 组件作为最根底的组件，撑起了 RN 页面的半壁江山，在应用的过程中有几个属性比拟冷门但集体认为挺有用的属性。
hitSlop属性：这个属性能够扩充 View 的触控范畴，在一些小按钮上用收益还是很大的pointerEvents属性：这个属性相似 CSS 的pointer-events属性，能够管制 View 对 touch 事件的响应
2.Text
Text 组件是很罕用的属性，有几个小点须要开发者留神一下：
- Android 上存在吞字景象，景象是局部机型上最初一个字符不显示，起因不明。目前的折衷方案是文字的最初一行多加一个空格 or 零宽字符
- Android 有个属性叫
includeFontPadding，设置为 false 后能够缩小文字高低的 padding（这个 padding 是为角标字符预留的，例如 H₂O、2ⁿᵈ），这样能够更好的实现高低垂直居中对齐 - 实现文字的居中对齐时，最好用一个
View嵌套一个Text标签，而后给View设置一些 flex 属性管制Text居中对齐。Web 开发中常常应用 lineheight 属性实现单行文字的垂直居中对齐，这种实现形式原本就是权宜之计，在 RN 上行不太通。最佳实际还是利用 flex 属性实现居中对齐 - 字体的配置相对来说比拟麻烦，有个不错的教程 Ultimate guide to use custom fonts in react native 能够参考一下
3.TextInput
输入框组件也是很罕用的属性，集体用下来有几个不爽的中央：
- iOS/Android 的默认款式差距比拟大，不做封装的话会写十分多的平台相干代码
placeholder的文字比拟长时，若呈现换行景象，没有 API 去管制它的行高- 若一个页面呈现多个
TextInput组件时，须要用ScrollView组件包裹，能力实现不同TextInput组件焦点切换的性能
4.Image
Image 组件在体现上我集体认为十分优良了，但在一些细节上初步上手的同学可能还是不太习惯：
- 没有 CSS 那么多的滤镜属性，只反对含糊成果，不过集体根本没遇到过图像滤镜需要
- 加载网络图片时，必须指定图片宽高，若不设置尺寸默认为 0
- Android 上图片尺寸十分大时（貌似是 5000px？），图片会间接加载不进去，不过这种场景很少很少，根本都会瓦片图分步加载，要不然大图会引起 OOM 的
-
iOS/Android 对 webp 的反对也不是开箱即用的，须要别离配置：
- iOS 应用
SDImageWebPCoder提供反对 - Android 应用
fresco提供反对 - 具体配置计划能够参考 react-native-webp-format
- iOS 应用
- Android 不反对点九图
5.Modal
RN 官网之前提供的 Modal 组件有个很显著的问题，Modal 无奈笼罩到状态栏。比如说咱们做了一个弹窗，背景是彩色半透明的，但状态栏是红色的，这样在感官上就十分的割裂。
所幸 0.62 版本上了一个 statusBarTranslucent 属性，设为 true 就能够笼罩到状态栏之上。如果是 0.62 以下的版本，就须要改一些配置了，能够参考 stackoverflow 的这个答复：How to hide the statusBar when react-native modal shown?
6.ScrollView
ScrollView 组件是 RN 提供的滑动容器组件，有几个比拟冷门然而很好用的 API 我这里阐明一下。
第一个是吸顶性能，波及到 StickyHeaderComponent 和 stickyHeaderIndices 这两个 API，能够实现滚动吸顶的成果，十分的好用。
第二个是 automaticallyAdjustContentInsets 属性，有时候 iOS 滚动列表上会呈现莫名其妙的空白区域，这个是 iOS Native 层实现的，RN 具体的触发机会我没有做具体的测试，但基本上把这个属性关掉就能够躲避了。
7.FlatList
FlatList 次要是留神 3 个点：
- FlatList 提供自定义的头部/底部/空白/分割线组件，比个别的 Web 组件封装更彻底一些
- React 渲染列表的时候会要求加
key以进步 diff 性能，然而 FlatList 封装的比拟多，须要用keyExtractor这个 API 来指定列表 Cell 的key - FlatList 性能优化的内容官网写的不是很好，我之前写了个更易懂的，有需要的同学能够理解一下
二、内置 API
本节内容次要是是对官网 React Native API 内容的补充，次要是说一些让人开发体验不爽的中央，帮忙起初人避坑。
1.AppState
AppState 这个 API 在理论开发中次要是监听 APP 前后台切换的，这个 API 在 iOS 上体现合乎语义，然而 Android 上就有问题了，因为 AppState 在 Android 端的实现其实是基于 Activity 的生命周期 的。
就比如说 AppState 提供的 background 这个状态，其实是基于 Activity 的 onPause() 的，然而依据 Android 的文档，onPause() 执行时有这么几种场景：
- APP 切换到零碎后盾（合乎预期）
- 以后 RN 容器 Activity 下层笼罩了新的 Activity（不合乎预期）
- 以后 RN 容器 Activity 下层笼罩了 Dialog，例如权限申请弹窗（Dialog 实质上就是个半透明 Dialog）（不合乎预期）
综上所述，应用 AppState 监听 APP 状态时要充分考虑 Android 的这些“异样”体现是否会引起程序 BUG。
2.Permissions
APP 平台的权限治理是一件很繁琐的事件，RN 官网只提供了 PermissionsAndroid，没有提供跨平台的权限治理 API，应用时很不不便。这里我倡议应用 react-native-permissions 这个库，管理权限更便捷。
3.Event
RN 官网上没有裸露 Event 相干的 API，然而 RN 曾经对外导出了 DeviceEventEmitter 这个「公布-订阅」事件治理 API，应用也很简略，如下案例应用即可。
import { DeviceEventEmitter } from 'react-native';
// 触发
DeviceEventEmitter.emit('EVENT');
// 监听
const listener = DeviceEventEmitter.addListener( 'EVENT', () => {});
// 移除
listener.remove()4.Animated
RN 的动画 API，说实话把握老本比拟高，单官网 API 就波及到 Animated、LayoutAnimation、Easing、useNativeDriver 等概念，而且文档散布比拟扩散，初学者很难在脑海里构建一个残缺的脑图。
如果你想构建性能更高的动画，还得学习 react-native-gesture-handler、react-native-reanimated 等第三方库的 API，学习老本直线飙升。
这里我举荐 React Native Animation Book 这本在线书籍，基本上算是手把手教学，看完之后就对 RN 的动画 API 有个整体的意识了。
三、第三方 Library
React Native 陆陆续续把一些非核心的组件交给社区保护，例如 webview、async-storage 等。还有一些非官方但很好用的组件，例如 react-native-svg、react-native-camera 等等。
除了这些和 Native 相干的第三方库，JS 社区里宿主无关的 JS 库也是能够应用的，例如 lodash、redux 等纯逻辑库。
因为第三方库太多了，所以我这里就不一一列举了。
四、特效篇
React Native 的 style 款式属性只提供了根底的布局属性，例如 flexbox layout、fontSize 等等。然而很多 CSS3 的特效属性，React Native 基本上都得引入第三方库。我梳理了一下罕用的几个 UI 特效要用到的属性和插件，不便开发者应用。
1.圆角成果
这个间接应用 View styles 属性的 borderRadius 即可，RN 同时也反对设置 View 四个角的独自弧度。
2.含糊成果
blur 成果要用到 @react-native-community/blur 这个 RN 官网社区库。这个 RN 含糊库比 CSS 的 blur() 属性更弱小一些，CSS 只反对高斯含糊，这个库反对起码三种含糊成果，不过具体成果还是要和 UED 商议。
3.暗影成果
暗影能够用 RN 提供的 Shadow Props，然而它是分平台的：
- iOS 提供了
shadowColor、shadowOffset、shadowOpacity和shadowRadius四个属性，和 CSS 的 box-shadow 属性齐全对标，能够满足绝大多数的场景 - Android 只提供了
shadowColor和elevation两个属性，而且从严格意义上来说，elevation其实是「仰角」的意思，是 Android 官网提供的属性，模仿事实中的从上向下的光照引起的暗影变动。尽管实践一套一套的，然而在事实开发中就会发现，elevation搞进去的暗影十分丑，和 iOS 比起来齐全是天壤之别。集体个别倡议应用突变代替暗影。
4.突变成果
突变要应用一个第三方库：react-native-linear-gradient，正如库名，这个仓库只提供「线性突变」的解决方案，以集体教训，线性突变在绝大部分状况下都足够了。如果要应用「径向突变」，能够应用 react-native-svg 的 RadialGradient 组件。
五、可视化篇
Web 平台除了最根底的 <p/> <img/> 标签，还反对 SVG、canvas 这些自由度较高的绘制 API。它们反对最多的就是可视化场景，例如各种自定义图像和图表。上面就简略介绍一下 RN 中对标 Web 的的一些第三方库。
1.SVG
RN 的 SVG 反对是基于 react-native-svg 这个仓库，就集体的应用体验来说，根本和 Web 的 SVG 性能没啥两样。除了自绘一些自定义 SVG，它更多的性能是作为底层库反对下层图表的应用。
2.类 canvas
RN 中是没有 canvas 这个概念的，市面上也没有很好用的 canvas 替代品。有开发者搞出了 react-native-skia，也有一些 demo 展现。但它目前其实还是一个实验性我的项目，上生产环境危险还是太大了。不过就我集体教训来说，很多绘制性能都能基于 SVG 实现，必须用 canvas 的状况应该并不多见。
基于 skia 你再把 flutter 集成进去，能够玩套娃游戏了 🙂
3.OpenGL 反对
在挪动端平台上，WebGL 就是浏览器平台对 OpenGL ES 的封装，RN 自身曾经很贴近 Native 平台了，就没必要舍本逐末反对 WebGL 了，间接反对 OpenGL ES 就好。
目前 RN 对 OpenGL 的反对是基于 gl-react 的，底层的适配层是基于 expo-gl。网上有个 gl-react 的 demo 教程，有须要的读者能够学习一下。
因为集体没做过 RN 3D 相干的需要，所以也无奈对该库得出一个精确的评估，须要读者自行判断
4.图表性能
图表是个很事实的需要，在一些 B 端场景上常常会有报表需要。因为 RN 只有 SVG 反对比较完善，所以 RN 的图表根本都是基于 SVG 绘制的。
Web 上基于 SVG 的图表库有很多，然而 RN 能用到的可能没有几个。次要起因是 RN 和 Web 的宿主环境不一样，一些图表库可能会用到 Web 特供 API（例如 getElmentById），像 ECharts 这样的库 RN 必定是用不了的。
可迁徙应用的库个别要满足两个条件：
- 纯逻辑：
D3.js一些纯逻辑的库，只用到 JS 的语言能力，例如 d3-scale - 平台无关：间接基于 React 构建，没有用到平台特有 API，例如 victory-native
这里有一个基于 D3.js 实现的股票箱型图的视频教程，感兴趣的读者能够理解一下。
5.海报性能
海报分享是现如今十分常见的一个前端性能，网页根本是基于 canvas 生成分享海报的，RN 虽没有较好的 canvas API，然而有个不错的库——react-native-view-shot，能够把 RN 写的 View 生成一张图片。借用这个库就能在 APP 本地生成图片，转而实现海报性能。
举荐浏览
RN 性能优化系列目录：
- 🎨 React Native 性能优化——Render 篇
- ⚡️ React Native 启动速度优化——Native 篇
- ⚡️ React Native 启动速度优化——JS 篇
如果你喜爱我的文章，心愿点赞👍 珍藏 📁 评论 💬 三连反对一下，谢谢你，这对我真的很重要！
欢送大家关注我的微信公众号：卤蛋实验室，目前专一前端技术，对图形学也有一些渺小钻研。
原文链接 👉 链接：更新更及时，浏览体验更佳
发表回复