Taro 3 增加 React Native 支持

作者： zhiqingchen

Taro 最近发布了 3.2.0-canary.1，增加了 React Native 支持，其由 58 技术 共建完成。

新版本 React Native 特性一览

1. 更快的编译速度
   • 基于全新的编译体系，启动速度提升 1 倍
2. 更便捷的开发调试体验
   • 去掉了 webpack 后，source-map 的支持更加简单，这对于开发体验是一个巨大的提升
3. 更全面的API和组件
   • 新增 38 个API
   • 新增 7 个组件
4. 更灵活的接入方式
   • 支持 React Native 0.60 及以上版本，可自行定制，我们也将探索更多版本的支持
   • API 和组件支持按需加载，未使用的原生依赖，无需安装
   • 架构完全基于 React Native 生态，相关工具、组件等均可轻松接入
5. 更稳定的源码
   • 使用 TypeScript、ESlint、Jest，保证代码质量
   • 欢迎社区贡献

如何开始

新仓库启动 bundler

# 注意：@tarojs/cli 最新版本还未发布，体验版在标签 canary 下
$ yarn global add @tarojs/cli@canary

# 创建并初始化 Taro 项目，框架需选择 React
$ taro init <projectName>

# 进入初始化目录
$ cd <projectName>

# 设置环境变量DEVTAG，首次使用会安装体验版相关依赖，需要等待一段时间
# 支持 --port 选项手动指定端口
$ DEVTAG=@canary yarn dev:rn --port 8081

# bundler 启动成功会显示如下信息
# React-Native Dev server is running on port: 8081

原3.x仓库启动 bundler

# 将`package.json`中 tarojs 相关依赖版本改为 `^3.2.0-canary.1`
# 特别注意 `@tarojs/taro-rn` `@tarojs/rn-runner` 可能被安装为 2.x 版本

# 重新安装依赖
$ yarn

# 启动bundler
$ yarn dev:rn --port 8081

# bundler 启动成功会显示如下信息
# React-Native Dev server is running on port: 8081

低版本仓库

请先参照升级指南，升级至 3.x 版本，再参照上述步骤

启动APP

新版本壳工程对应地址为 github.com/NervJS/taro…

# 下载壳工程
$ git clone -b 0.63.2 git@github.com:NervJS/taro-native-shell.git

# 安装依赖
$ yarn

# iOS 需要安装原生依赖
$ npx pod-install

# 构建并启动应用 
$ yarn android -- --no-packager

# 加载成功，可以看到 “Hello world”
# 如 IP 或端口号不一致，需自行配置

相关资料链接

0. 版本内容对应的RFC
1. 3.2.0 canary 版本分支
2. 壳工程分支
3. 最新进展，可关注 58 开源

如果你有相关的疑问，点击链接参与讨论