第19课:总结

知识点:

  • 适配 iPhone X
  • 添加额外的线程
  • 缓存
  • 关于 Alert、Modal
  • 样式
  • 自定义组件

适配 iPhone X

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

enter image description here

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

enter image description here

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

enter image description here

添加额外的线程

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

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

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 启动之后就会缓存这部分样式,同时也非常容易将已经有的部分样式替换掉。

这些可以参考开源的 RN 组件库等。

自定义组件

在 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。

//安卓的没变化,要排除
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 有一个进一步的了解,还需要对原生的代码也有一定的了解,当然正常情况下还是有位这方面的同事一起开发比较好。

限时福利1:原价 129 元,最后2天仅需 69 元!后天涨价至98元 限时福利2:购进答疑群专享柳峰(刘运强)老师答疑服务 限时福利3:购添加助教领取价值 800 元的编程大礼包 为什么需要掌握高性能的MySQL实战? 由于互联网产品用户量大、高并发请求场景多,因此对MySQL的性能、可用性、扩展性都提出了很高的要求。使用MySQL解决大量数据以及高并发请求已经是程序员的必备技能,也是衡量一个程序员能力和薪资的标准之一。 为了让大家快速系统了解高性能MySQL核心知识全貌,我为你总结了「高性能 MySQL 知识框架图」,帮你梳理学习重点,建议收藏! 【程设计】 程分为四大篇章,将为你建立完整的 MySQL 知识体系,同时将重点讲解 MySQL 底层运行原理、数据库的性能调优、高并发、海量业务处理、面试解析等。 一、性能优化篇: 主要包括经典 MySQL 问题剖析、索引底层原理和事务与锁机制。通过深入理解 MySQL 的索引结构 B+Tree ,学员能够从根本上弄懂为什么有些 SQL 走索引、有些不走索引,从而彻底掌握索引的使用和优化技巧,能够避开很多实战中遇到的“坑”。 二、MySQL 8.0新特性篇: 主要包括窗口函数和通用表表达式。企业中的许多报表统计需求,如果不采用窗口函数,用普通的 SQL 语句是很难实现的。 三、高性能架构篇: 主要包括主从复制和读写分离。在企业的生产环境中,很少采用单台MySQL节点的情况,因为一旦单个节点发生故障,整个系统都不可用,后果往往不堪设想,因此掌握高可用架构的实现是非常有必要的。 四、面试篇: 程序员获得工作的第一步,就是高效的准备面试,面试篇主要从知识点回顾总结的角度出发,结合程序员面试高频MySQL问题精讲精练,帮助程序员吊打面试官,获得心仪的工作机会。
评论将由博主筛选后显示,对所有人可见 | 还能输入1000个字符 “速评一下”
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页