React Native 0.80 开始支持 iOS 预构建

React Native 又发布新版本了,近来 React Native 的更新速度越来越频繁,想来也许距离 1.0 版本应该不远了🤪,而本次 0.80 也来带来了一个全新的支持: iOS Prebuilds ,而这个尝试可以说是对于 React Native 在 iOS平台的的未来至关重要。

React Native 0.80 是第一个可以将 React Native for iOS 部分作为预构建版本发布的版本,核心目的是希望帮助减少构建时间,但是在我看来,解决时间只是次要,提高编译成功率才是这个更改的核心价值

在过去构建 React Native iOS 的时候,在首次原生构建会需要比较长的构建时间,这是因为需要编译整个 React Native iOS 代码及其所有依赖项。

而在 0.80 版本里,官方选择了 Folly 和 GLog 等这些部分稳定且编译耗时的基础库进行预构建,以此作为技术验证并,当然,这里也提到了只有部分,比如 Folly 和 GLog :

  • Folly 主要用于 JS 和原生代码之间的通信, 提供底层支持,优化数据处理和内存管理
  • GLog 是 Google 开发的日志记录库,RN 使用它来记录和调试底层的 C++ 代码

而等后续新架构稳定、API 边界清晰、并且二进制分发流程得到充分验证后,官方会将 React Native 自身的核心库也迁移到预构建模式,最终实现整个框架的二进制化分发,例如 React-cxxreact、React-jsi、ReactCommon 等。

而如前面的代码所示,在 React Native 发布过程中,会有一个 ReactNativeDependencies.xcframework 的 XCFramework,它是 React Native 所依赖的第三方依赖项的预构建版本,而在 Xcode 执行编译链接时,它会直接链接这些已经编译好的 XCFrameworks。

从官方目前提供的数据看,在 M4 芯片的机器上,使用预构建依赖项的 iOS 构建速度比从源码构建大约快 12% :

当然,更重要的是可以减少开发者的本地环境(如 Xcode 版本、Clang 版本、系统库、CocoaPods 版本等)带来的构建失败,毕竟在 React Native 社区里,用户报告的许多 iOS 构建问题主要源于第三方依赖项的编译失败或配置错误:

而如果后续大部分依赖都通过官方预构建,就可以提前讲将这些潜在的问题在依赖项分发之前就解决掉,从而减少了因环境差异导致的构建失败,进而 RN 的开发体验。

相信 RN 开发者对于跑不起来这件事···深有体会。

而由于这个功能目前处于实验阶段,因此默认情况下是未启用,如果想使用可以通过添加 RCT_USE_RN_DEP 环境变量来安装 pod:

ini 复制代码
RCT_USE_RN_DEP=1 bundle exec pod install

或者通过修改 Podfile 来强制:

ruby 复制代码
if linkage != nil
  Pod::UI.puts "Configuring Pod with #{linkage}ally linked Frameworks".green
  use_frameworks! :linkage => linkage.to_sym
end
​
+ENV['`RCT_USE_RN_DEP`'] = '1'
​
target 'HelloWorld' do
  config = use_native_modules!

可以预想到,在未来如果 RN 能提供大量的 iOS 预构建支持,那么莫名其妙的构建失败将会大大减少,至少你不会再遇到新来的同事问你:"为什么这个项目我一 run 就报错" ?

参考链接:

相关推荐
前端康师傅1 分钟前
JavaScript 函数详解
前端·javascript
金金金__4 分钟前
antd v5 support React is 16 ~ 18. see https://u.ant.design/v5-for-19 for...
前端
会豪5 分钟前
工业仿真(simulation)--前端(二)-资源管理器
前端
android_xc38 分钟前
Android Studio适配butterknife遇到的坑
android·ide·android studio·butterknife
@小红花1 小时前
从0到1学习Vue框架Day03
前端·javascript·vue.js·学习·ecmascript
2501_915918411 小时前
uni-app 项目 iOS 上架效率优化 从工具选择到流程改进的实战经验
android·ios·小程序·uni-app·cocoa·iphone·webview
前端与小赵1 小时前
vue3中 ref() 和 reactive() 的区别
前端·javascript·vue.js
魔云连洲1 小时前
Vue的响应式底层原理:Proxy vs defineProperty
前端·javascript·vue.js
00后程序员张1 小时前
如何在不同 iOS 设备上测试和上架 uni-app 应用 实战全流程解析
android·ios·小程序·https·uni-app·iphone·webview
专注VB编程开发20年1 小时前
CSS定义网格的列模板grid-template-columns什么意思,为什么要用这么复杂的单词
前端·css