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

Created on 2 Dec 2020 · 75Comments · Source: NervJS/taro

问卷调查及案例搜集

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

width='200px' style='float:right'/>

优秀案例和第三方库征集

分享资料

参考示例

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

新版本特性一览

更快的编译速度
1. 基于全新的编译体系，启动速度提升1倍
更便捷的开发调试体验
1. 去掉了 webpack 后，source-map 的支持更加简单，这对于开发体验是一个巨大的提升
更全面的API和组件
1. 新增 38 个API
2. 新增 7 个组件
更灵活的接入方式
1. 支持 React Native 0.60 及以上版本，可自行定制，我们也将探索更多版本的支持
2. API 和组件支持按需加载，未使用的原生依赖，无需安装
3. 架构完全基于 React Native 生态，相关工具、组件等均可轻松接入
更稳定的源码
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 [email protected]:NervJS/taro-native-shell.git

# 安装依赖
$ yarn

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

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

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

版本发布

壳工程更新

常见问题

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

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

Announcement T-rn

Source

zhiqingchen

👍14 🚀3 🎉3

Most helpful comment

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

liganghui on 5 Dec 2020

🚀8

All 75 comments

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

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

tourze on 2 Dec 2020

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

shinken008 on 3 Dec 2020

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

shinken008 on 3 Dec 2020

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

dedeyi on 3 Dec 2020

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

shinken008 on 3 Dec 2020

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

ningkaikok on 4 Dec 2020

👍2

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

shinken008 on 5 Dec 2020

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

liganghui on 5 Dec 2020

🚀8

@liganghui 已经提上日程🐶

shinken008 on 5 Dec 2020

3.2.0-canary.2 更新内容

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

shinken008 on 8 Dec 2020

👍6

3.2.0-canary.3 更新内容

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

shinken008 on 15 Dec 2020

👍4

taro-ui有没有考虑支持rn

492869397 on 17 Dec 2020

有没有示例工程呢？

heynext on 17 Dec 2020

@492869397 内部已经在考虑了

shinken008 on 17 Dec 2020

taro-ui有没有考虑支持rn

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

shinken008 on 17 Dec 2020

新手起步注意事项

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

shinken008 on 18 Dec 2020

👍1

3.2.0-canary.4 更新内容

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

shinken008 on 22 Dec 2020

👍1

@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/[email protected]" on the "npm" registry.

weipengzou on 22 Dec 2020

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

shinken008 on 23 Dec 2020

3.2.0-canary.5 更新内容

config 增加让 rn导航配置
新增 rn pageScrollTo,start/stopPulldown 相关 API
新增 rn 对全局 enablePullDownRresh 兼容

shinken008 on 29 Dec 2020

👍3 🎉1

3.2.0-canary.5 更新内容

config 增加让 rn导航配置

新增 rn pageScrollTo,start/stopPulldown 相关 API

新增 rn 对全局 enablePullDownRresh 兼容

彩，更新速度好快

luckyadam on 29 Dec 2020

3.2.0-canary.5 更新内容

config 增加让 rn导航配置

新增 rn pageScrollTo,start/stopPulldown 相关 API

新增 rn 对全局 enablePullDownRresh 兼容

彩，更新速度好快

撸起袖子加油干

shinken008 on 29 Dec 2020

抓紧出个示例工程吧，我都琢磨半个月了，react-native还是比较熟的人，但是到现在都没运行起来

wyzwhp on 30 Dec 2020

持续关注，公司就等着这个版本了

qiliangya on 4 Jan 2021

抓紧出个示例工程吧，我都琢磨半个月了，react-native还是比较熟的人，但是到现在都没运行起来

ok，过两天会出来一个

shinken008 on 4 Jan 2021

持续关注，公司就等着这个版本了

感谢关注，可以开发起来，目前社区提的 bug 不多

shinken008 on 4 Jan 2021

抓紧出个示例工程吧，我都琢磨半个月了，react-native还是比较熟的人，但是到现在都没运行起来

@heynext @wyzwhp 实例工程：https://github.com/wuba/Taro-Mortgage-Calculator

shinken008 on 5 Jan 2021

👍3

3.2.0-canary.6 更新内容：

Button 组件支持 number
解决预处理语言不能引入 .css 文件问题
修复全局样式 app.css 不生效的一些问题
tabbar config 样式问题修复

shinken008 on 7 Jan 2021

👍4

增加了参考示例 wyzwhp/taro-rn-demo
来自 @wyzwhp
该项目将壳工程与RN代码统一在一个仓库中管理，同时也实现了打包多端。

zhiqingchen on 14 Jan 2021

我看了你们的文档，还是有点不理解你们的流程啊。是先下载rn壳工程？然后taro init 初始化一个项目，然后把项目里面的代码复制到壳工程的src目录吗？然后运行壳工程启动APP？？？？？？

hechuanhua on 19 Jan 2021

我看了你们的文档，还是有点不理解你们的流程啊。是先下载rn壳工程？然后taro init 初始化一个项目，然后把项目里面的代码复制到壳工程的src目录吗？然后运行壳工程启动APP？？？？？？

壳工程和项目代码是分离的。你可以把壳工程想象成微信，项目就是你的小程序。

zhiqingchen on 19 Jan 2021

我看了你们的文档，还是有点不理解你们的流程啊。是先下载rn壳工程？然后taro init 初始化一个项目，然后把项目里面的代码复制到壳工程的src目录吗？然后运行壳工程启动APP？？？？？？

壳工程和项目代码是分离的。你可以把壳工程想象成微信，项目就是你的小程序。

那你的意思就是还是要自己手动复制一下代码到壳工程是吧

hechuanhua on 19 Jan 2021

我看了你们的文档，还是有点不理解你们的流程啊。是先下载rn壳工程？然后taro init 初始化一个项目，然后把项目里面的代码复制到壳工程的src目录吗？然后运行壳工程启动APP？？？？？？

壳工程和项目代码是分离的。你可以把壳工程想象成微信，项目就是你的小程序。

那你的意思就是还是要自己手动复制一下代码到壳工程是吧

开发环境靠metro server。生产环境把bundle打到壳工程，没有需要复制的地方，看文档里关于rn开发的说明。

zhiqingchen on 19 Jan 2021

请问react-native目前支持taro 编写的echart效果吗

yangqi1024 on 20 Jan 2021

3.2.0-canary.7 更新内容：

在全量引入的同时支持按需加载，减小包大小
taro-rn api 增加 getCurrentPages 以及 typing 调整
移除 import 'react-native/Libraries/polyfills/error-guard'
getSystemInfoSync showActionSheet 适配调整
修复chooseVideo success 里回调参数与文档保持一致
重构 swiper 组件
增加 less 文件 nest import 支持跨平台以及修复不属于平台的样式警告
修复多次push同一个页面时，页面函数不触发问题

shinken008 on 20 Jan 2021

👍6

请问react-native目前支持taro 编写的echart效果吗

暂时不支持，后面会对 canvas 进行支持

shinken008 on 20 Jan 2021

你好，有ios正式包的打包过程介绍吗？

phillip111 on 20 Jan 2021

你好，有ios正式包的打包过程介绍吗？

参考下这个：https://taro-docs.jd.com/taro/docs/react-native#%E6%9E%84%E5%BB%BA%E7%8B%AC%E7%AB%8B-app

iChengbo on 21 Jan 2021

你好，有ios正式包的打包过程介绍吗？

参考下这个：https://taro-docs.jd.com/taro/docs/react-native#%E6%9E%84%E5%BB%BA%E7%8B%AC%E7%AB%8B-app

和js相关不大，我新开工程，引入react-native-unimodules 相关工程后
xcode 就会打包失败

是否需要添加特殊的xcode配置？

phillip111 on 21 Jan 2021

你好，有ios正式包的打包过程介绍吗？

参考下这个：https://taro-docs.jd.com/taro/docs/react-native#%E6%9E%84%E5%BB%BA%E7%8B%AC%E7%AB%8B-app

和js相关不大，我新开工程，引入react-native-unimodules 相关工程后
xcode 就会打包失败

是否需要添加特殊的xcode配置？

看起来像是 pod install 时没安装成功

iChengbo on 21 Jan 2021

看起来像是 pod install 时没安装成功

目测是成功的，找不到异常点，但xcode Pods/Products下的包都是红色的，不确定是不是这里的问题

phillip111 on 21 Jan 2021

@phillip111 你要不先用壳工程试试？https://github.com/NervJS/taro-native-shell/tree/0.63.2

iChengbo on 21 Jan 2021

@phillip111 你要不先用壳工程试试？https://github.com/NervJS/taro-native-shell/tree/0.63.2

开始就是使用壳工程，有点问题，感觉应该是xcode的问题，我先自行排查一下。感谢解答

phillip111 on 21 Jan 2021

3.2.0-canary.8 更新内容：

新增 taro-rn-support 包支持导出 metro 配置，适配原生应用混合场景
新增支持 RN 跨平台文件在 node_modules 下可配置

shinken008 on 28 Jan 2021

👍3

新手起步注意事项

新版本源问题，淘宝有的时候同步慢，指定官方源 --registry https://registry.npmjs.org/

tarojs/cli npm 没有装全局，那就得局部安装，这个过程要安装两次(项目外 init，项目里面start)，后续建议搞个版本管理 taro 版本

设置环境变量启动 [email protected] yarn dev:rn (windows 环境 export [email protected]
设置环境变量)。第一次启动会安装包，没有设置会安装官方正式包

壳子工程没有梯子安装失败，可以去找找原生相关的国内镜像，或者去找个梯子

没梯子的就没辙了吗？下载expo的时间真是。。。万恶呀。这是个很严重的问题呀，国内的框架不解决好镜像的问题，这实属不该。

taoqf on 29 Jan 2021

metro目前不支持tree-shaking，最终打包的bundle体积会比较大，Taro有考虑如何处理这个问题吗？

inarol on 29 Jan 2021

metro目前不支持tree-shaking，最终打包的bundle体积会比较大，Taro有考虑如何处理这个问题吗？

taro rn接口和组件部分做了按需加载，页面是可配置的。其他方面需要自行考虑。

zhiqingchen on 29 Jan 2021

components-rn

previewImage android 返回键无法关闭，
ClickableSimplified/index.js
a).isMove 判断距离太小，导致点击事件不触发
b).WrappedComponent如果不添加背景颜色，导致点击区域集中在文本和图片上，其他空白区域点击无效
3.router-rn TabBar onLongPress极容易触发，导致onPress失效
4.taro-rn/dist/lib/file.js 网络请求超时判断在debbug模式异常，可以加__DEV__过滤处理
5.router-rn/dist/rootNavigation.js 针对页面跳转是否可以节流操作
希望可以完善一下

phillip111 on 1 Feb 2021

components-rn

previewImage android 返回键无法关闭，

ClickableSimplified/index.js
a).isMove 判断距离太小，导致点击事件不触发
b).WrappedComponent如果不添加背景颜色，导致点击区域集中在文本和图片上，其他空白区域点击无效
3.router-rn TabBar onLongPress极容易触发，导致onPress失效
4.taro-rn/dist/lib/file.js 网络请求超时判断在debbug模式异常，可以加__DEV__过滤处理
5.router-rn/dist/rootNavigation.js 针对页面跳转是否可以节流操作
希望可以完善一下

shinken008 on 2 Feb 2021

新手起步注意事项

新版本源问题，淘宝有的时候同步慢，指定官方源 --registry https://registry.npmjs.org/

tarojs/cli npm 没有装全局，那就得局部安装，这个过程要安装两次(项目外 init，项目里面start)，后续建议搞个版本管理 taro 版本

设置环境变量启动 [email protected] yarn dev:rn (windows 环境 export [email protected]
设置环境变量)。第一次启动会安装包，没有设置会安装官方正式包

壳子工程没有梯子安装失败，可以去找找原生相关的国内镜像，或者去找个梯子

没梯子的就没辙了吗？下载expo的时间真是。。。万恶呀。这是个很严重的问题呀，国内的框架不解决好镜像的问题，这实属不该。

嗯嗯，已经改了，还没提交

shinken008 on 2 Feb 2021

提了 issues，这边也同步问一下 [RN] Taro 3.2.0-canary.8 是否支持 CSS Modules？ https://github.com/NervJS/taro/issues/8656

WechatIMG152

SolidZORO on 6 Feb 2021

3.2.0-canary.9 更新内容：

新增 3 个 api，向用户发起授权请求：authorize；打开设置页：openSetting；获取用户当前设置：getSetting
修复若干已知 bug

shinken008 on 24 Feb 2021

👍2

有计划什么时候支持一下 chooseLocation、openLocation 接口嘛

iamxiyang on 1 Mar 2021

有计划什么时候支持一下 chooseLocation、openLocation 接口嘛

已经在做了，因为不同业务用的不一样地图，我们会先提供一个百度地图版本。

zhiqingchen on 1 Mar 2021

👍2 👀1

3.2.0-beta.0 更新内容：

修复页面与全局设置backgroundColor不生效问题
跳转多个页面后switchTab问题
首页调用switchTab报错问题

shinken008 on 2 Mar 2021

👍1

使用3.2.0-canary.9这个版本的初始化项目，使用react语法，mobx模板出来的DEMO项目

运行这个命令yarn dev:rn后报错：
(node:24049) UnhandledPromiseRejectionWarning: Error: 缺少页面
at RNPlugin.getPages (/Users/jianming241/jm/git/taro3-reactnative-demo/node_modules/@tarojs/rn-runner/dist/plugins/RNPlugin.js:415:23)

jianming1999 on 5 Mar 2021

今天使用 3.2.0-beta.0 写了一会儿，遇到了一点问题。

1.

我使用 sass，提取了很多公共的类名、方法，全部写在 app.scss 比较乱，因此我在 src 目录下创建了一个 styles 目录，里面有 _font.scss、_theme.scss等，然后在 app.scss 通过 @import "/styles/theme" 或 @import "./styles/theme" 引入。在写小程序时是正常的，在rn时提示 “样式文件没有找到，请检查文件路径: ./styles/theme” 。

2.
在配置中写 navigationStyle:"custom" 似乎还不支持。

3.
还有一点问题，在小程序、h5中使用字体图标是比较简单的，直接下载iconfont的项目通过引用css即可，在rn端好像这样并不行，看你们提供的示例都没有带iconfont， 想问下有没有能适合rn和小程序端通用的字体图标方案呢？

iamxiyang on 6 Mar 2021

使用3.2.0-canary.9这个版本的初始化项目，使用react语法，mobx模板出来的DEMO项目

运行这个命令yarn dev:rn后报错：
(node:24049) UnhandledPromiseRejectionWarning: Error: 缺少页面
at RNPlugin.getPages (/Users/jianming241/jm/git/taro3-reactnative-demo/node_modules/@tarojs/rn-runner/dist/plugins/RNPlugin.js:415:23)

我今天也遇到这个问题，发现上面常见问题已经说过解决方案了。 @tarojs/taro-rn @tarojs/rn-runner 被安装为 2.x 版本。修改下package.json，重新安装下就好了

iamxiyang on 6 Mar 2021

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

在之前的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 on 12 Mar 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 来解决了这个问题，实际并没作用。

tourze on 12 Mar 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 来解决了这个问题，实际并没作用。

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

shinken008 on 12 Mar 2021

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

shinken008 on 12 Mar 2021

群里是我。。。

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

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

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

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

tourze on 12 Mar 2021

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

shinken008 on 12 Mar 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 on 12 Mar 2021

👍2

例如:

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

这种样式，最终会转换成：

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

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

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

tourze on 12 Mar 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`,
  }
}

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

Lsnsh on 17 Mar 2021

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

shinken008 on 18 Mar 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}...

Lsnsh on 19 Mar 2021

app.config.ts配置如下

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

yangqi1024 on 22 Mar 2021

@yangqi1024 换成最新版的试试

zhiqingchen on 23 Mar 2021

👍1

3.2.0-beta.4 更新内容

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

shinken008 on 29 Mar 2021

👍1

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

lbc19920615 on 1 Apr 2021

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

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

shinken008 on 2 Apr 2021

👍1

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

zhiqingchen on 2 Apr 2021

Was this page helpful?

0 / 5 - 0 ratings

Related issues

taro怎么做UI测试？jest测试报着问题是什么概念？

chankamlam · 3Comments

customer hook返回的方法使用时报错

liu-dongyu · 3Comments

编译的时候不成功报错，不知道为什么要下载这个文件

aiewing · 3Comments

头条map android下闪退或空白

qilovehua · 3Comments

要是能集成dva就好了,redux太痛苦了

LadyChatterleyLover · 3Comments

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

问卷调查及案例搜集

相关资料链接

分享资料

参考示例

新版本特性一览

如何开始

新仓库启动 bundler

原3.x仓库启动 bundler

低版本仓库

启动APP

版本发布

壳工程更新

常见问题

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

UnhandledPromiseRejectionWarning: Error:缺少页面

缺少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"

build:rn 报错

Most helpful comment

All 75 comments

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

3.2.0-canary.2 更新内容

3.2.0-canary.3 更新内容

3.2.0-canary.4 更新内容

3.2.0-canary.5 更新内容

3.2.0-canary.5 更新内容

3.2.0-canary.5 更新内容

3.2.0-canary.6 更新内容：

3.2.0-canary.7 更新内容：

3.2.0-canary.8 更新内容：

3.2.0-canary.9 更新内容：

3.2.0-beta.0 更新内容：

3.2.0-beta.4 更新内容

Related issues

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