ReactNative中遇到的问题


适配iPhoneX

RN版本0.52之后提供了适配iPhoneX的组件SafeView。不过单独这个是不行的,还需要在ios中修改配置,把视图从一个短小的区域拉伸到全屏的大小。
enter image description here

这里通过修改设置打开默认的安全区域。
enter image description here

由于之前使用的还是旧版的RN,这里我为了兼容旧的版本做了一个js的判断。通过判断高度是否符合812来判断是否iPhoneX。同时有一个小小的缓存,不需要每次都重复判断。这里的1.0.6是开始使用新能力的版本号。
enter image description here

添加额外的线程

有些功能其实没必要跑在UI线程上。这些东西如果放在组件里反而不是那么融洽。甚至有时候会对正常的逻辑产生影响。

可以使用下面的方式注册一下额外的层。这个不显示UI,但是可以用来更新一些缓存,返回远程数据等。

1
2
3
AppRegistry.registerRunnable('RunableTask', TaskRun)

AppRegistry.runApplication('RunableTask', {});

在线上产品中就是利用了这一个层做了一些额外的事情。这里我使用事件触发的形式来做正常组件和这一个层的通知。
enter image description here

需要小心一点。如果在这一层做了定时器、循环事件等操作,记得要取消掉,不然事件就会变成两次。

缓存

APP还是需要缓存的。这里可以缓存一些上次打开的数据,比如广告、用户信息等。

在打开APP的时候可以先用这些数据走正常的流程,然后在用一个异步的任务去鉴定、更新这些数据。这样下来可以让APP打开非常流畅,同时用户也不会发现数据变化大等异常。这些同时也是需要后端接口数据支持的。

关于Alert、Modal

正常情况下Alert、Modal是独立于当前组件View之上的。如果这个时候遇到意外情况。比如组件销毁、暂停等情况下Alert还未销毁。这个时候就会发生比较严重的错误。

Alert大多数会报错,APP闪退。

Modal部分会报错,部分会暂停,失去事件等操作。导致APP一直停留在Modal视图上,用户也不能操作任何东西。时间长了系统就会判断APP未响应等等。

如果你不想处理这些东西,可以考虑使用一个自定义的Alert或者内嵌在组件中的View来代替Modal。

自定义组件

在APP中其实有些属性是要经常用到的。比如Text组件的禁止使用系统字体大小,Image的缩放方式等。这些组件在平常使用过程中会经常重复添加各种属性,可以将这些组件独立出来,并且使用更加语义化的属性名来代替RN提供的使用方式。

在这个的基础上还可以将按钮、卡片等组件进一步抽象出来。对于不使用第三方开源组件的项目来说还是很有必要的。

解决遇到的问题

使用RN开发会遇到很多问题,这些问题都可以在RN的Issues中找到答案。如果还没有就上google去搜一下,这个要求使用科学上网的形式。

有些问题需要修改RN的代码。不要怕麻烦,如果是js部分的修改,直接将下载的包修改成可上传的包就行了。这里记得上传到私有npm库中。如果是native的问题最好是在自己的native代码中覆盖掉旧的代码,毕竟前端去编译RN的源代码还是有很大的风险的。

不要去百度,百度真的没有答案。

按钮

RN提供的按钮其实很丑,正常开发的时候大家都是使用自定义的按钮。
enter image description here

使用这种模式做出来的按钮非常漂亮,也更能符合设计的结果。不过使用的时候尽量不要给按钮本身加样式,有样式尽量添加到内部的View等组件上。

向下兼容

RN使用的过程中我们升级了一个大的版本,从0.40系列升级到了0.50系列。由于大部分手机用户还存在不愿意升级APP的情况,向下兼容成了唯一的选择。

我使用的策略是修改源代码。。。。

比如升级0.53的时候发现有些native组件名变了。原来使用的是RCTMultilineTextInputView,现在变成了RCTTextView。不管RN出于什么理由改变了这个组件名字,造成的结果就是现在的旧代码不能跑在新的APP壳下。

我们可以打印出NativeModules的UIManager对象看看。
enter image description here

而兼容也是从这里开始做的。我们判断一下当前的RN是否在UIManager中提供了对应的原生组件即可判断当前的环境是否正确的环境。

比如要升级到53,修改53的源代码react-native/Libraries/Components/TextInput/TextInput.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
//安卓的没变化,要排除
if (Platform.OS === 'android') {
var AndroidTextInput = requireNativeComponent('AndroidTextInput', null);
} else if (Platform.OS === 'ios') {
//如果支持RCTTextView,既新APP
if(UIManager.RCTTextView){
var RCTMultilineTextInputView = requireNativeComponent('RCTTextView', null);
var RCTSinglelineTextInputView = requireNativeComponent('RCTTextField', null);
}else{
//其他情况
var RCTMultilineTextInputView = requireNativeComponent('RCTMultilineTextInputView', null);
var RCTSinglelineTextInputView = requireNativeComponent('RCTSinglelineTextInputView', null);
}
}

使用类似这样的手段就能区别两种APP壳的环境。用户在使用的时候也不至于要必须升级APP才能使用新版APP的功能了。

使用RN开发APP确实非常快,但是各位在开发中还是不要忘记钻研RN的源代码。很多解决方案其实很简单,有些时候可能只是由于低版本的APP不支持而导致的。

如果你想对RN有一个进一步的了解,还需要对原生的代码也有一定的了解。当然正常情况下还是有位这方面的同事一起开发比较好。


文章作者: 郭方超
版权声明: 本博客所有文章除特別声明外,均采用 CC BY 4.0 许可协议。转载请注明来源 郭方超 !
评论
  目录