React Native 4 - 阶段性总结

React Native 4

Demo 如下：

React Native Demo3

算是一个用到现在对使用过的组件和 API 进行一个……阶段性总结吧。

状态管理

RN 始终是基于 React 的一个衍生，因此 React 的状态管理方式这里也是通用的，即可以选择 state+prop，context，Redux/Mobx 的方式进行管理。类似的总结也写过，这里不再多加赘述，Redux 部分可以参考 Redux Toolkit 调用 API 的四种方式 等其他 Redux 相关文章，也可以到 React 系列导航 中找？

API 差异

这一点还是得看官方文档，而且根据写 demo 的经验来说，安卓的类型检查做的比 ios 要好一些。比如说 Input 中有一个 attribute 为 maxLength，最开始的时候设值的类型是字符串：maxLength: '10'，ios 同样也会报错，不过页面没有崩溃，并且还能继续运行，安卓直接就页面崩了：

Debug 的问题

目前来说感觉 RN 的 debug 体验感不是很好，使用 console.log() 虽然会有输出，不过并不会像网页版那样显示具体在哪个文件哪一行上：

因此使用 logger 大概只能是简单的过一下那些逻辑有跑，那些逻辑没有，面对较为复杂的组件嵌套时需要根据 RN 的报错信息，使用 RN 提供的 remote debug：

然后，这里的 debugger 是有互斥性的，安卓平台调出来的 debugger 只能 debug 对应的安卓设备，反之亦然：

这种配置有好有坏吧，看个人偏好，但是目前来说我对 ios 模拟器的使用体感还是挺差的，不知道是 xcode 的问题还是版本的问题，ios 模拟器上的 additional menu 没办法调用出来，因此只能使用手机 debug。

平台差异和设备差异

样式

从内置样式来说，感觉安卓的实现比 ios 好一些，如 button 的一个 onPress 的效果，RN 有一个 android_ripple 可以提供一个类似波纹的点击效果（带过渡效果），ios 上就没有，必须要手动写 opacity，同时也需要自己写过渡效果。

另外就是安卓有自带的 elevation，可以提供类似阴影的效果，ios 这部分也是要手动实现的。在不分别平台的情况下，样式会与 elevation 效果合并，从而变得不是很明显。

组件

如果要针对不同平台写组件，可以使用 RN 提供的 Platform API，然后通过 Platform.OS 进行判断。当然，除了 OS 之外，API 也有提供如 isPad 等一些检查当前设备的方法。这种方法假设平台间的差异不大，所有的代码可以放在一个组件中。

另一个方法当两个平台的逻辑非常的不一致，甚至无法共用（如一些支付方式等），这样可以针对平台进行实现，其命名方式为 Component.ios.js 和 Component.andriod.js，在其他地方引入时依旧使用 import Component from ...，RN 会根据设备自动判断需要从哪个 js 文件中进行导入。

最后是 useWindowDimensions() 这个 hook，这个不太针对平台，但是针对的是设备，如可以获取高度、宽度、缩放等，可以根据设备实现不同的 CSS。

总体来说，如果本身就会 React，那么上手 RN 还是挺快的。