开发►前端

react-native ios 流水账

示例工程：sample project

一、前言

现在跨端的开发采取了前端的 DSL，也变成前端人员必备的开发技能之一了。

当前：

  1. react-native，weex，快应用（严格讲是跨手机）这种使用前端语言，视图部分交由原生渲染，所以 css 都是酌情支持。交互部分交由另外启动的 js 引擎来执行。
  2. 各类小程序这种使用前端语言，视图部分由 webview 渲染，所以大部分 css 都是支持。交互部分交由另外启动的 js 引擎来执行。
  3. fluter，自己整的渲染器和逻辑解析器，开发语言也是自己一套。硬要说也是和小程序一类吧，只不过小程序用的终端落地方案是现成的，fluter 都自己弄新的。

有了跨端解决方案，就有了跨端写法统一解决方案。比如：uni-app taro mpvue，chamelon，就是采用 vue 或者 react 的技术栈，然后可以编译成 rn，小程序等的编译产物。主打一个殊归同途。

前两种其实都是大同小异，都是前端 DSL，只不过是可用的标签和样式不一，一通百通，看看文档就可以了。fluter 都是完全不同的语言，有接触到再说。

二、启动

react-native ios 开发的第一个难点就是搭环境。参考官网《environment-setup》。

里面提到可以用沙盒模式开发，也就是先跳掉一系列的系统环境安装。但是我想这只适合体验一下，如果真的要开发 react-native，还是得配好一系列环境。何况中文官网还说了：

译注：沙盒环境大量依赖于国外网络环境，也不能直接安装第三方原生组件。不建议国内用户使用

所以还是老老实实从 Xcode 安装起吧。其中可能需要科学上网才能安装完，比如这个 CocoaPods，这个 ios 依赖包管理工具，就要下载很久。

ruby 版本

mac 默认的 ruby 版本是 2.6.8，当前 react-native 中用到的 ruby 版本是 2.7.5，需要更新。可以参考网上大佬的文章《React-native初始化项目（Installing Ruby Gems）》。

ios 依赖

在准备好工具后，就会开始初始化项目。会很久，安装完前端的依赖后，会进行 ios 的依赖的安装。这一步可能会有各种失败，比如安装 hermes 引擎就很容易失败。
这时候不用重新创建项目，确保外层的前端 node_modules 安装完后，进入 ios 文件夹执行 pod install，或者在根目录执行 npx pod-install，重试一直到完成。

真机调试

参考官网《Running On Device》。主要操作就是数据线把手机连上电脑，在 Xcode 最上面可以选择运行环境，选择自己手机就可以了。

Xcode build 时候报错

  • 要注册开发者账号，可以先用个人 apple id，会分配一个私人 team
  • 报错：The app identifier “org.reactjs.native.example.reactnativeapp” cannot be registered to your development team because it is not available. Change your bundle identifier to a unique string to try again.

搜索 stackoverflow 的回答：可能是原来的 identifier 被使用了，需要改成别的。不清楚哪里使用了，按理说之前没操作过不会使用到的。改成 org.reactjs.native.example.reactnativeappxxx 后可行。

打开网页调试

开发时候，会执行 react-native start 会启动一个本地服务器提供调试服务，打开 localhost:8081 页面，能在浏览器看到 console 的信息。如《Debugging JS on Hermes using Google Chrome’s DevTools》所示。但…在当前 react-native 0.72.x 版本，调试不出来，没有如官网那样的展示。

console 的信息还是会在终端界面打印出来，如果不习惯的话，可以先改为旧引擎（应该是 jsCore 吧），不用 hermes 了。在 ios/Podfile 文件：
hermes_enabled => flags[:hermes_enabled] 改为 hermes_enabled => false

三、相关库

router

路由库可以用：@react-navigation/native。用法示例可以参考大佬的文章《深入学习React Native之路由导航》。

涉及到 ios 依赖更新，需要在 ios 文件夹执行 pod install。

icon

图标库可以用：react-native-vector-icons。可以结合这篇《How to use vector icons in your react-native project》来看。

在 Info.plist 添加字体文件的时候，可以先添加一个，然后打开编辑 Info.plist 文件，按文档给出的代码直接写在 Info.plist 上。在 Xcode 上的添加，最后也是以 xml 的格式记录在 Info.plist 文件上。
图标库种类很多，完全够用了，可以在图标展示库选。

涉及到 ios 依赖更新，需要在 ios 文件夹执行 pod install。

localStorage

现在本地存储已经抽离成单独的库《react-native-async-storage/async-storage》来实现。用法其实也和 web 的没区别，不过是同步变异步。

涉及到 ios 依赖更新，需要在 ios 文件夹执行 pod install。

svg

可以使用 react-native-svg，支持度非常好。

涉及到 ios 依赖更新，需要在 ios 文件夹执行 pod install。

对于 alias 的支持

参考官网《Using Custom Path Aliases with TypeScript》。用了 babel 的插件，用法很简单。记得 babel.config.js 和 tsconfig.json 都要搭配修改。

以前是不支持的。从 0.72 开始，实验性的支持《React Native 0.72 - Symlink Support, Better Errors, and more》。
在 metro.config.js 增加两个开关参数：

const config = {
  // ...
  resolver: {
    unstable_enableSymlinks: true,
    unstable_enablePackageExports: true,
  },
};

实践后发现，软连接要生效还需要加上 watchFolders 字段的处理。就是 watch 软连接的文件夹。

四、其它

关于与原生的集成，可以参考
《ios 原生应用集成 react-native》
《android 原生应用集成 react-native》。