Taro: React Native 端开发体验问题汇总

Created on 31 Aug 2018 · 60Comments · Source: NervJS/taro

Taro 编译 React Native 端，凡是影响到开发体验到问题，无论是开发流程优化、文档补全，或是容易踩到的坑，都可以在此列出来，帮助我们快速高效迭代。🔥🔥🔥

PS：进 Taro RN 开发群可以统一回复凹凸小助手：RN

Source

Pines-Cheng

👍6 ❤4 🎉3 😄3

Most helpful comment

确实，不能自定义添加原生组件的代码是 expo 最大的弊端。不过 expo 的好处也是显而易见的，如：开发门槛低，不需要配置环境等，屏蔽原生代码等。
后期将会提供添加原生组件的代码解决方案。
@linjson

Pines-Cheng on 5 Sep 2018

👍5

All 60 comments

React Native 支持，需要加速了

zacksleo on 31 Aug 2018

请问React Native的版本大概什么时候出

hanwenbo on 2 Sep 2018

React Native 不支持组合选择器，它样式都是在一个组件里，不太会遇到样式覆盖的问题，
但是转成 H5、小程序时就可能会遇到 class 同名样式冲突的问题了。
那如何来避免，或者怎样来写样式比较合理，只能都给 class 加上前缀么？

js-newbee on 3 Sep 2018

遇到的一些坑：

图片不能用 [email protected] 这样的命名，会报 Unable to resolve ./[email protected]" from ".//components/index.js: The module./[email protected]` could not be found" 的错误...
border-bottom: 1px solid #000 报错，得拆分成 border: 0 solid #000、border-bottom-width: 1px 才行
View 不支持 onClick ？如果要让一整块区域都可点击，又或者让一张图片可点击，应如何实现？
有一些 React Native 组件支持的属性，例如 Text 的 numberOfLines，是否放开支持（RN 样式不支持 text-overflow）？
Taro.navigateTo(没反应), Taro.redirectTo(报错) 都无效？那如何进行页面跳转？

js-newbee on 4 Sep 2018

👍3

React Native 不支持组合选择器，它样式都是在一个组件里，不太会遇到样式覆盖的问题，
但是转成 H5、小程序时就可能会遇到 class 同名样式冲突的问题了。
那如何来避免，或者怎样来写样式比较合理，只能都给 class 加上前缀么？

@js-newbee
RN 的样式仅仅针对当前引入的文件生效，不同文件的 className 同名也没有影响。不过 app.scss 里面的样式是全局样式，这里面的样式命名就需要注意样式冲突的问题。

Pines-Cheng on 5 Sep 2018

初步怀疑是路径不支持特殊符号，具体我先看看。
css -> stylesheet 的转换使用的是 css-to-react-native-transform，这个包的话，样式转换确实有一些局限性，比如你提到的这点。不过这已经是我们能够找到的最好的包了。

问题 3，4 已经反馈给组件开发的同学。

必须保证你的 pages 页面配置和你跳转转入的 url 是一致的哦，看看两边是不是漏了 / 之类的。

@js-newbee

Pines-Cheng on 5 Sep 2018

请问React Native的版本大概什么时候出

beta 版已经可以尝鲜了。
本周将和 1.0.0 一起，正式发布。

Pines-Cheng on 5 Sep 2018

@js-newbee

View 不支持 onClick ？如果要让一整块区域都可点击，又或者让一张图片可点击，应如何实现？

ReactNative 不支持嵌套点击，当你用了嵌套的 Touchable* 并点击了里面的 Touchable* 时，它的处理流程是这样的：

Parent onStartShouldSetResponder (true) > 
Parent onStartShouldSetResponderCapture (false) >
  Child onStartShouldSetResponder (true) > 
  Child onResponderGrant > 
  Child onResponderRelease

可以自行尝试

<ReactNativeView
  onStartShouldSetResponder={() => true}
  onStartShouldSetResponderCapture={() => true}
  onResponderGrant={() => { console.log('grant outer') }}
  onResponderRelease={() => { console.log('release outer') }}
>
  <ReactNativeView
    onStartShouldSetResponder={() => true}
    onResponderGrant={() => { console.log('grant inner') }}
    onResponderRelease={() => { console.log('release inner') }}
  >
    <Text>Click me</Text>
  </ReactNativeView>
</ReactNativeView>

所以，应该由书写规范约束来实现你要的效果，图片点击为图片点击，图片之外的区域为外部的点击。

Manjiz on 5 Sep 2018

rn的编译能不能不依赖EXPO运行时,因为EXPO不能自定义添加原生组件的代码,或是你们有没好的方案,可以在EXPO的基础上使用自定义的原生组件

linjson on 5 Sep 2018

👍2

Pines-Cheng on 5 Sep 2018

👍5

@js-newbee

有一些 React Native 组件支持的属性，例如 Text 的 numberOfLines，是否放开支持（RN 样式不支持 text-overflow）？

本来考虑的是样式全部通过CS所说的包来转换，还是太年轻，它能做的事有限，并不能把样式转成属性赋给组件，ReactNative 有 ellipsizeMode 和 numberOfLines ，前者的默认值 tail 类似 text-overflow: ellipsis 效果。我会更新到组件库中，到时候开发者就要把 numberOfLines 传进来实现 -webkit-line-clamp 的效果，这个属性对小程序和 H5 来说是多余的。

还有其他开发者有需求而且必要的属性，会加进去，但是——如果全属性支持，就跟用 ReactNative 本身来开发无异了。所以框架会越来越完善，让开发者少写这些特定环境才需要的代码。

Manjiz on 5 Sep 2018

🎉1

@Pines-Cheng

Q: Taro.navigateTo(没反应), Taro.redirectTo(报错) 都无效？那如何进行页面跳转？
A: 必须保证你的 pages 页面配置和你跳转转入的 url 是一致的哦，看看两边是不是漏了 / 之类的。

是这原因没错，但目前有不一致的地方：
小程序的 config.pages 的路径不能以 / 开头，否则会报错；
那只能 Taro.navigateTo 的 url 也不能以 / 开头，这样 RN 才能正常跳转，但是在小程序里跳转的 url 不以 / 开头就会被识别为相对路径，变成如 /pages/index/pages/other/index，跳转不了...

js-newbee on 6 Sep 2018

👍1

这么坑。。那我来兼容一下路由的写法吧。 @js-newbee

Pines-Cheng on 6 Sep 2018

@Pines-Cheng 好的等您发布我们去体验下我们公司现在也有不少业务是rn开发的需要这样的解决方案能减少不少工作量

hanwenbo on 6 Sep 2018

@js-newbee 路由问题已 fix ，今天应该会发一版。

Pines-Cheng on 6 Sep 2018

@AibiTi 在Taro裡直接用View就可以了

Manjiz on 11 Sep 2018

ERROR STARTING PACKAGER

Error: React native is not installed. Please run npm install in your project directory.
15:51:04: Error starting packager: Error: Couldn't start project. Please fix the errors and restart the project.
at E:xdlsrcProject.js:1329:11
at Generator.next ()
at step (E:[email protected]@xdlbuildProject.js:1735:191)
at E:[email protected]@xdlbuildProject.js:1735:361
at

kivenC on 23 Oct 2018

在 .rn_temp 目录下运行 npm install即可。@kivenC

Pines-Cheng on 23 Oct 2018

在 .rn_temp 目录下运行 npm install即可。@kivenC

上面那个错误是在编译完成后出现的
我在 .rn_temp 目录下运行 npm install后又报错，错误如下：
npm ERR! path E:TaroProjectsmyApp.rn_tempnode_modulesanalytics-nodenode_modulesclone
npm ERR! code ENOENT
npm ERR! errno -4058
npm ERR! syscall access
npm ERR! enoent ENOENT: no such file or directory, access 'E:TaroProjectsmyApp.rn_tempnode_modulesanalytics-nodenode_modulesclone'
npm ERR! enoent This is related to npm not being able to find a file.
npm ERR! enoent

npm ERR! A complete log of this run can be found in:
npm ERR! C:UsersndAppDataRoamingnpm-cache_logs2018-10-24T08_22_11_807Z-debug.log

kivenC on 24 Oct 2018

运行npm run dev:rn/taro build --type rn --watch时找不到xdl依赖包下的Project.js文件

KimCongMax on 24 Oct 2018

'E:TaroProjectsmyApp.rn_tempnode_modulesanalytics-nodenode_modulesclone'

你这路径有问题啊。@kivenC

Pines-Cheng on 25 Oct 2018

多半是依赖安装的问题，在 .rn_temp 目录下删除 npm 依赖，然后运行 npm install重新安装即可。

如果还是有问题，可以提一个新的 issue ，附上详细信息和截图。@KimCongMax

Pines-Cheng on 25 Oct 2018

'E:TaroProjectsmyApp.rn_tempnode_modulesanalytics-nodenode_modulesclone'

你这路径有问题啊。@kivenC

我把.rn_temp目录下的node_modules删除，重新运行npm install后出现一些警告，没有错误
可是我该如何打包运行呢？

kivenC on 26 Oct 2018

在。rn_temp下expo build:android 打包成了apk，但是应用打不开，是app.json有什么需要注意的吗

ztopia on 15 Nov 2018

@ztopia 建议单独提一个 issue ，然后完善描述和截图，方面复现和解答。

Pines-Cheng on 15 Nov 2018

Pines-Cheng on 19 Dec 2018

大家好：
如果是想把 React Native 集成到现有的原生项目中，能使用Taro的RN开发吗？感谢！

yoowei on 25 Dec 2018

二维码过期了，来这里吧！

xmt1139057136 on 27 Dec 2018

确实，不能自定义添加原生组件的代码是 expo 最大的弊端。不过 expo 的好处也是显而易见的，如：开发门槛低，不需要配置环境等，屏蔽原生代码等。
后期将会提供添加原生组件的代码解决方案。
@linjson

这个已经添加了吗？

westeast on 14 Jan 2019

@Pines-Cheng taro rn的核心微信群能拉下吗？最近已经在用taro开发rn了，目前遇到两个问题：
1，想引入支付宝和微信支付，最好调用原生的sdk,这里一般怎么做，文档里过用openurl打开浏览器，感觉这样体验太差，现在有推荐的方案吗？
2，rn本向有一些navigator在raro我看 navigator 只实现了小程序端的 h5要可以用taro的api来实现，那 taro的rn端怎么实现呢？
3, taro的rn默认一直有一个header，这个page 里不配置，在app.js中也有个默认的，这个可以去掉吗？

相关配置如果都不配置的话，这里也是有一个空白的header

westeast on 14 Jan 2019

第三个问题和微信小程序一致，配置：navigationStyle:custom 即可。

Pines-Cheng on 18 Jan 2019

@Pines-Cheng taro rn的核心微信群能拉下吗？最近已经在用taro开发rn了，目前遇到两个问题：
1，想引入支付宝和微信支付，最好调用原生的sdk,这里一般怎么做，文档里过用openurl打开浏览器，感觉这样体验太差，现在有推荐的方案吗？
2，rn本向有一些navigator在raro我看 navigator 只实现了小程序端的 h5要可以用taro的api来实现，那 taro的rn端怎么实现呢？
3, taro的rn默认一直有一个header，这个page 里不配置，在app.js中也有个默认的，这个可以去掉吗？

相关配置如果都不配置的话，这里也是有一个空白的header

@Pines-Cheng 第一个问题有什么有什么体验好点的方案吗？ react-native应该有实现的封装的原生sdk的包吧，taro中目前有什么办法用吗？

westeast on 21 Jan 2019

@westeast Taro 基于 expo 开发，expo 暂不支持引入原生 sdk，我们也在探索合适的解决方案。

Pines-Cheng on 21 Jan 2019

@Pines-Cheng 能否再分享一下群的二维码，谢谢

mauvew on 10 Feb 2019

请问RN端能否使用expo的数据库API，我发现直接在src中是不能使用的，没有expo包，是不是只能在rn_temp中才能用？

BigBaBei on 15 Feb 2019

可以考虑提供一个可以运行taro rn的基础react-native-app，以独立的项目形式提供给开发者。大致的工作流程是：

开发者clone或通过命令生成一份taro-react-native-app-template，放在跟src目录同层下的rn目录。rn目录应是一个标准的RN项目，有android/ios/src/node_modules等文件夹
运行npm run dev:rn，会实际将转译的代码copy到 rn/src/下
开发者如有原生开发需求，可独立打开rn目录来开发