Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

增加 React Native 支持的 Taro 3.2.0 版本测试通告 #8180

Closed
zhiqingchen opened this issue Dec 2, 2020 · 79 comments
Closed

增加 React Native 支持的 Taro 3.2.0 版本测试通告 #8180

zhiqingchen opened this issue Dec 2, 2020 · 79 comments
Labels
Announcement T-rn Target - 编译到 React Native

Comments

@zhiqingchen
Copy link
Member

zhiqingchen commented Dec 2, 2020

问卷调查及案例搜集

Taro 支持 React Native 即将发布正式版本,为了更好的提供技术支持,帮助更多的开发者提供开发效率,改善开发体验。希望更多的开发者能够积极反馈,同时也希望大家提供案例,共同繁荣 Taro 的生态。

优秀案例和第三方库征集

开发者调试 app

  1. 源码地址:https://github.com/wuba/taro-playground
  2. APP下载:https://github.com/wuba/taro-playground/releases

相关资料链接

  1. 3.2.0文档
  2. 版本内容对应的RFC
  3. 3.2.0 beta 版本分支
  4. 壳工程分支
  5. 最新进展,可关注58开源

分享资料

  1. Taro 支持 React Native(PDF + 视频)
  2. 58技术 - 开源 | Taro 3 支持 React Native
  3. Taro 3.2 适配 React Native 之样式内幕
  4. Taro 3.2 适配 React Native 之运行时架构详解
  5. Taro 3.2 版本正式发布:React Native 支持,王者归来

参考示例

  1. wuba/Taro-Mortgage-Calculator
  2. wyzwhp/taro-rn-demo (壳工程与项目工程合并管理)
  3. wuba/Taro-Code-In-React-Native (直接在原 React Native 工程中使用 Taro)

新版本特性一览

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

如何开始

新仓库启动 bundler

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

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

# 以上可用 `npx @tarojs/cli@beta init <projectName>` 代替

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

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

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

原3.x仓库启动 bundler

# 将`package.json`中 tarojs 相关依赖版本改为 `^3.2.0-beta.1` (注意:babel-preset-taro 也需)
# 特别注意 `@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

新版本壳工程对应地址为 https://github.com/NervJS/taro-native-shell/tree/0.63.2
Android debug包下载

# 下载壳工程,注意分支为 0.63.2
$ 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 或端口号不一致,需自行配置

版本发布

版本号 PR 备注
3.2.0-canary.1 #8165 Deprecated
3.2.0-canary.2 #8214 Deprecated
3.2.0-canary.3 #8265 Deprecated
3.2.0-canary.4 #8341 Deprecated
3.2.0-canary.5 #8386 Deprecated
3.2.0-canary.6 #8458 Deprecated
3.2.0-canary.7 #8552 swiper 组件不兼容更新,壳工程需要安装react-native-viewpager,参考壳工程更新
3.2.0-canary.8 #8587
3.2.0-canary.9 #8732
3.2.0-beta.0 #8790
3.2.0-beta.2 #8867 合并 3.1 改动,getLocation 接口不兼容更新,壳工程需要安装@react-native-community/geolocation,参考壳工程更新
3.2.0-beta.3 #8953
3.2.0-beta.4 #8975 增加了 React Native 0.64 版本的支持,js工程与shell工程,需保持版本一致

壳工程更新

PR 内容
NervJS/taro-native-shell#32 修复打包报错
NervJS/taro-native-shell#34 增加依赖 react-native-viewpager
NervJS/taro-native-shell#36 maven 增加国内镜像
NervJS/taro-native-shell#39 增加依赖 @react-native-community/geolocation

常见问题

一些编译配置修改了没有生效

metro 打包transformer会有缓存加速,可以在根目录下添加文件metro.config.js

module.exports = {
  resetCache: true
}

或启动时增加--reset-cache。(3.2.0-canary.2增加)

yarn dev:rn --port 8081 --reset-cache

调试完成后可以关闭,遇到此类问题,请在issue内告知。

UnhandledPromiseRejectionWarning: Error:缺少页面

@tarojs/taro-rn @tarojs/rn-runner 被安装为 2.x 版本。修改下package.json,重新安装下。

缺少RN基本配置

忽略,或在config/index.js加配置rn:{}

安卓打包./gradlew assembleRelease 报错 Execution failed for task ':app:mergeExtDexRelease'.

已修复,更新壳工程

error Couldn't find any versions for "@tarojs/components" that matches "3.2.0-beta.1"

此类问题是因为npm镜像源还未更新,可切换下源,修改根目录的.npmrc文件。通过taro init 创建的项目默认源为淘宝源。

build:rn 报错

(node:87910) UnhandledPromiseRejectionWarning: Error: Unable to resolve module `./Libraries/Components/AccessibilityInfo/AccessibilityInfo` from `node_modules/react-native/index.js`: ./Libraries/Components/AccessibilityInfo/AccessibilityInfo could not be found within the project.

打包时未设置对应平台

taro build --type rn --platform ios
@honlyHuang honlyHuang pinned this issue Dec 2, 2020
@NervJS NervJS deleted a comment from taro-bot2 bot Dec 2, 2020
@tourze
Copy link
Contributor

tourze commented Dec 2, 2020

去掉了 webpack 后,source-map 的支持更加简单,这对于开发体验是一个巨大的提升

有个疑惑,去掉的话,类似preval这种特性,RN里面怎么处理?

@shinken008
Copy link
Collaborator

shinken008 commented Dec 3, 2020

@tourze 你指的是这种特性?现在暂不支持这种特性,具体实现可以用 babel插件去做。刚试了下 taro3.0.8 weapp h5 平台也是不支持的,rn 的做法尽量跟其他平台保持一致。对于跨端的配置更推荐使用官方文档 https://taro-docs.jd.com/taro/docs/envs

@shinken008
Copy link
Collaborator

@tourze 想加这个特性欢迎开个 issue 大家一起讨论啊哈

@dedeyi
Copy link

dedeyi commented Dec 3, 2020

给一个建议:全局配置config(App.tsx 里面的config配置),单独提出去可配置,支持编译时确定config内容。我们现在做法是 config/index.js 里面动态读取不同端 app.config.json 替换 App.tsx 里的config

@Chen-jj Chen-jj added Announcement T-rn Target - 编译到 React Native labels Dec 3, 2020
@shinken008
Copy link
Collaborator

是的,现在大部分做法用一个文件在运行时去require不同的文件,比如config文件。但这样就需要一个额外的文件去做这件事,其实我更倾向于可以根据 entryFileName 去读 entryFileName.config,不一定是 app,目前小程序不支持。

@ningkaikok
Copy link

哎,虽然很佩服Taro的愿景...但是可以先解决小程序的的bug或者功能。有多少用户使用Taro开开发App呢

@shinken008
Copy link
Collaborator

@ningkaikok 不冲突哈,react native 这一块现在58技术团队在维护

@liganghui
Copy link

支持 !
但是 Taro-Ui 啥时候也维护下啊 , 半年没维护了 🙏

@shinken008
Copy link
Collaborator

@liganghui 已经提上日程🐶

@zhiqingchen zhiqingchen changed the title 增加 React Native 支持的 Taro 3.2.0 版本测试通告(当前测试版本 3.2.0-canary.1) 增加 React Native 支持的 Taro 3.2.0 版本测试通告(当前测试版本 3.2.0-canary.2) Dec 8, 2020
@shinken008
Copy link
Collaborator

3.2.0-canary.2 更新内容

1.app入口公共样式注入到页面失效修复
2.修复跨端情况下引入文件省略拓展不能按优先级引入问题
3.修复 js 下装饰器报错
4.cli增加 reset-cache 等命令
5.修复一些已知问题

@shinken008
Copy link
Collaborator

3.2.0-canary.3 更新内容

  1. 修复 yarn build:rn 命令报错
  2. 修复页面 config 文件修改后无法更新
  3. 修复页面 config 新增后需要重启
  4. 修复 alias 引起来的若干问题
  5. 修改 TARO_ENV RN 成 rn
  6. 修复 output bundle 问题
  7. 新增 assets-dest 处理

@zhiqingchen zhiqingchen changed the title 增加 React Native 支持的 Taro 3.2.0 版本测试通告(当前测试版本 3.2.0-canary.2) 增加 React Native 支持的 Taro 3.2.0 版本测试通告(当前测试版本 3.2.0-canary.3) Dec 15, 2020
@492869397
Copy link

taro-ui有没有考虑支持rn

@CyberNika
Copy link

有没有示例工程呢?

@shinken008
Copy link
Collaborator

@492869397 内部已经在考虑了

@shinken008
Copy link
Collaborator

taro-ui有没有考虑支持rn

没有复杂的,直接init吧,可以用 taro3 做个简单的小程序适配一下

@shinken008
Copy link
Collaborator

shinken008 commented Dec 18, 2020

新手起步注意事项

  1. 新版本源问题,淘宝有的时候同步慢,指定官方源 --registry https://registry.npmjs.org/
  2. tarojs/cli npm 没有装全局,那就得局部安装,这个过程要安装两次(项目外 init,项目里面start),后续建议搞个版本管理 taro 版本
  3. 设置环境变量启动 DEVTAG=@3.2.0-canary.5 yarn dev:rn (windows 环境 export DEVTAG=@3.2.0-canary.5
    设置环境变量)。第一次启动会安装包,没有设置会安装官方正式包
  4. 壳子工程没有梯子安装失败,可以去找找原生相关的国内镜像,或者去找个梯子

@shinken008
Copy link
Collaborator

3.2.0-canary.4 更新内容

  • 修改 alias 和 跨平台文件匹配的 resolve 策略,用来解决文件缓存带来的问题

@zhiqingchen zhiqingchen changed the title 增加 React Native 支持的 Taro 3.2.0 版本测试通告(当前测试版本 3.2.0-canary.3) 增加 React Native 支持的 Taro 3.2.0 版本测试通告(当前测试版本 3.2.0-canary.4) Dec 22, 2020
@weipengzou
Copy link

@tarojs/taro-rn @tarojs/rn-runner 被安装为 2.x 版本。修改下package.json,重新安装下。
这个修改kackage.json是改版本号吗,我改成3.2.0-canary.4报错了。怎么解决?
Couldn't find package "react-native-animatable@^1.3.0" required by "@tarojs/components-rn@3.2.0-canary.3" on the "npm" registry.

@shinken008
Copy link
Collaborator

@weipengzou 上面的报错怎么怎么还有包版本是 3.2.0-canary.3,你都改成 3.2.0-canary.4 然后再 install

@zhiqingchen zhiqingchen changed the title 增加 React Native 支持的 Taro 3.2.0 版本测试通告(当前测试版本 3.2.0-beta.1) 增加 React Native 支持的 Taro 3.2.0 版本测试通告(当前测试版本 3.2.0-beta.2) Mar 11, 2021
@tourze
Copy link
Contributor

tourze commented Mar 12, 2021

scss中引用了别名,taro-rn无法解析。看了下,应该是截图这里没对别名进行处理。

image

在之前的taro开发中,scss默认也是不支持别名的,但是可以通过在config/index.js中加入:

  sass: {
    // 全局插入
    resource: [
      'src/custom.scss',
      `src/${process.env.APP_NAME}/theme.scss`,
    ],
    projectDirectory: path.resolve(__dirname, '..'),
    importer: function (url) {
      let file = null;
      Object.keys(aliasList).forEach(alias => {
        if (url.startsWith(alias)) {
          file = url.replace(alias, aliasList[alias]);
        }
      });
      if (file) {
        return {
          file,
        };
      }

      return packageImporter(url);
    }
  },

来解决。
希望taro-rn也支持这种写法。

@tourze
Copy link
Contributor

tourze commented Mar 12, 2021

另外发现,在 *.config.js (如 app.config.js)中无法读取 process.env.TARO_ENV。

在实际开发中,会有部分端不需要一些页面。如有一个”关于我们“的页面,RN和H5我们不需要打包,之前的做法是直接在 app.config.js 中做判断即可。现在taro3.2.0-beta.1不支持这种写法。

目前我们尝试使用 babel-plugin-transform-inline-environment-variables 来解决了这个问题,实际并没作用。

@shinken008
Copy link
Collaborator

另外发现,在 *.config.js (如 app.config.js)中无法读取 process.env.TARO_ENV。

在实际开发中,会有部分端不需要一些页面。如有一个”关于我们“的页面,RN和H5我们不需要打包,之前的做法是直接在 app.config.js 中做判断即可。现在taro3.2.0-beta.1不支持这种写法。

目前我们尝试使用 babel-plugin-transform-inline-environment-variables 来解决了这个问题,实际并没作用。

你在群里反馈过这个问题吧, 实际上是可以读到的,而你说的一个貌似是 require 另一个 config 报错的问题

@shinken008
Copy link
Collaborator

@tourze sass alias 的问题我优先支持的 scss importer 这种解决方案

@tourze
Copy link
Contributor

tourze commented Mar 12, 2021

群里是我。。。

现在又有一个 scss 问题。例如下面的代码片段:

@import './mixins/tint';
@import './mixins/eject';

会提示找不到scss文件。实际是存在的。

image

这里拿到的 ext 为空,导致下面的查找文件都失效。

@shinken008
Copy link
Collaborator

好,我一起看下。
可以不用截图,文字或者伪代码描述一下就行了,图片太多,这个issue 打开很慢,或者另开一个 issue

@tourze
Copy link
Contributor

tourze commented Mar 12, 2021

scss不支持别名,我暂时改了resolveStyle来解决:

function resolveStyle(id, opts) {
    const { basedir, platform, paths = [], logLevel = types_1.LogLevelEnum.ERROR } = opts;
    let { dir, name, ext } = path_1.default.parse(id);

    // 下面查找和替换下别名
    const aliasList = {
      '@/taro-ui': '/Users/lzp/work/docker/www/taro-aio/src/taro-ui',
    };
    Object.keys(aliasList).map((alias) => {
      if (dir.startsWith(alias)) {
        paths.push(dir.replace(alias, aliasList[alias]));
      }
    });

    const incPaths = [path_1.default.resolve(basedir, dir)].concat(paths);
    const exts = [
        // add the platform specific extension, first in the array to take precedence
        platform === 'android' ? '.android' + ext : '.ios' + ext,
        '.rn' + ext,
        ext
    ];

@tourze
Copy link
Contributor

tourze commented Mar 12, 2021

例如:

border-bottom: 1px solid $color-border-base;

这种样式,最终会转换成:

StyleSheet at-list__header-wrapper: {
  "borderBottom": "0.5px solid #DCDFE6"
}

能否在转译时自动转换为: borderBottomWidth / borderBottomStyle / borderBottomColor ?

这样做兼容的话,会容易很多。

@Lsnsh
Copy link

Lsnsh commented Mar 17, 2021

要怎么才能够构建一个「NODE_ENV=development」的 index.bundle 呢,用于之后打包测试用的离线 APP

package.json:

"script": {
  "build:rn": "npx taro build --type rn",
  "dev:rn": "npm run build:rn -- --watch"
}

yarn dev:rn 或者 npm run dev:rn 是开发时用到的命令。构建出来的 index.bundle 是通过访问本地服务获取的。


尝试在控制台执行 NODE_ENV=development npx taro build --type rn --platform android 后,Taro 能够识别 NODE_ENV=development,但是构建出来的 index.bundle 中的 NODE_ENV 却还是等于 production

➜  erp-mp-v3.2 git:(feature/v0.4.0-taro-v3.1.1-upgrade-to-3.2.0-beta.0-with-react-native) ✗ NODE_ENV=development npx taro build --type rn --platform android
👽 Taro v3.2.0-beta.0

Tips: 预览模式生成的文件较大,设置 NODE_ENV 为 production 可以开启压缩。
Example:
$ NODE_ENV=production taro build --type rn --watch

                 Welcome to React Native!
                Learn once, write anywhere

因为代码中有依赖于 NODE_ENV 来区分测试/生产环境,调用不同的接口。

const isProduction = process.env.NODE_ENV === 'production';

export default  {
  // ...
  '/api': {
    target: `https://${isProduction ? '' : 'test-'}api.domain.com`,
  }
}

目前的做法是,打测试包的时候,手动改写相关的代码。

@shinken008
Copy link
Collaborator

@Lsnsh
Copy link

Lsnsh commented Mar 19, 2021

@Lsnsh 试试定义env https://taro-docs.jd.com/taro/docs/config-detail#env

@shinken008 这个已经定义了,在 yarn dev:rn 或者 npm run dev:rn 的时候能够正常读取到 NODE_ENV 的值。现在是打包的时候,从控制台显示的信息来看也是读取到了:

> NODE_ENV=development npx taro build --type rn --platform android --reset-cache

👽 Taro v3.2.0-beta.0

Tips: 预览模式生成的文件较大,设置 NODE_ENV 为 production 可以开启压缩。
Example:
$ NODE_ENV=production taro build --type rn --watch

warning: the transform cache was reset.
                 Welcome to React Native!
                Learn once, write anywhere


transform[stdout]: 启动  样式文件处理开始  src/app.scss
...

但是最终的 index.bundle 中包含的 NODE_ENV 始终都会等于 production,而不是打包时设置的 development

var __BUNDLE_START_TIME__=this.nativePerformanceNow?nativePerformanceNow():Date.now(),__DEV__=false,process=this.process||{};process.env=process.env||{};process.env.NODE_ENV=process.env.NODE_ENV||"production";
!(function(r){"use strict";r.__r=o,r.__d=function(r,i,n){if(null!=e[i])return;var o={dependencyMap:n,factory:r,hasError:!1,importedAll:t,importedDefault:t,isInitialized:!1,publicModule:{exports:{}}};e[i]=o}...

@yangqi1024
Copy link

app.config.ts配置如下
image

使用rn打开后,没有走splash页面,直接打开的是tabbar配置的页面,这个是bug吗

@zhiqingchen
Copy link
Member Author

@yangqi1024 换成最新版的试试

@zhiqingchen zhiqingchen changed the title 增加 React Native 支持的 Taro 3.2.0 版本测试通告(当前测试版本 3.2.0-beta.2) 增加 React Native 支持的 Taro 3.2.0 版本测试通告(当前测试版本 3.2.0-beta.3) Mar 23, 2021
@shinken008
Copy link
Collaborator

3.2.0-beta.4 更新内容

  1. Video 组件 onPause, onPlay, showCenterPlay 按钮等问题
  2. react-native 版本升级到 0.64.0,壳子工程项目需要切换到 0.64.0 分支 https://github.com/NervJS/taro-native-shell/tree/0.64.0

@zhiqingchen zhiqingchen changed the title 增加 React Native 支持的 Taro 3.2.0 版本测试通告(当前测试版本 3.2.0-beta.3) 增加 React Native 支持的 Taro 3.2.0 版本测试通告(当前测试版本 3.2.0-beta.4) Mar 29, 2021
@shinken008 shinken008 linked a pull request Apr 1, 2021 that will close this issue
20 tasks
@shinken008 shinken008 removed a link to a pull request Apr 1, 2021
20 tasks
@lbc19920615
Copy link

我实在不建议taro现在就冒险进入React Native的坑
React Native下一代架构还在重构中

@zhiqingchen zhiqingchen changed the title 增加 React Native 支持的 Taro 3.2.0 版本测试通告(当前测试版本 3.2.0-beta.4) 增加 React Native 支持的 Taro 3.2.0 版本测试通告 Apr 1, 2021
@shinken008
Copy link
Collaborator

我实在不建议taro现在就冒险进入React Native的坑
React Native下一代架构还在重构中

吵来吵去,生活得继续。 拥抱变化。Taro 之前版本做过支持,Taro 3 一直没做支持而已。

@zhiqingchen
Copy link
Member Author

正式版已发布,后续有问题可提供issue反馈。

@JNUfeatherwit
Copy link

3.2.10版本怎么去掉RN相关的包,实在不需要RN的包

@zhiqingchen
Copy link
Member Author

3.2.10版本怎么去掉RN相关的包,实在不需要RN的包

#9477

@yangqi1024
Copy link

基于Taro写了一个组件库,有的组件使用index.rn.tsx作为平台区分入口,但是通过npm依赖后,发现项目中Rn并没有按照index.rn.tsx去加载,加载的依旧是index.tsx,导致编译报错,请问有解决方案吗

@zhiqingchen
Copy link
Member Author

基于Taro写了一个组件库,有的组件使用index.rn.tsx作为平台区分入口,但是通过npm依赖后,发现项目中Rn并没有按照index.rn.tsx去加载,加载的依旧是index.tsx,导致编译报错,请问有解决方案吗

@shinken008

@Chen-jj Chen-jj unpinned this issue Jul 13, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Announcement T-rn Target - 编译到 React Native
Projects
None yet
Development

No branches or pull requests