React Native 端开发体验问题汇总

[Pines-Cheng]

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

---

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

[zacksleo]

React Native 支持，需要加速了

[hanwenbo]

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

[js-newbee]

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

[js-newbee]

遇到的一些坑：

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

[Pines-Cheng]

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

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

[Pines-Cheng]

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

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

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

@js-newbee

[Pines-Cheng]

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

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

[Manjiz]

@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>

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

[linjson]

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

[Pines-Cheng]

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

[Manjiz]

@js-newbee

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

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

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

[js-newbee]

@Pines-Cheng

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

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

[Pines-Cheng]

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

[hanwenbo]

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

[Pines-Cheng]

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

[Manjiz]

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

[kivenC]

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:\xdl\src\Project.js:1329:11
at Generator.next ()
at step (E:\TaroProjects\myApp\node_modules_xdl@48.1.4@xdl\build\Project.js:1735:191)
at E:\TaroProjects\myApp\node_modules_xdl@48.1.4@xdl\build\Project.js:1735:361
at

[Pines-Cheng]

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

[kivenC]

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

上面那个错误是在编译完成后出现的
我在 .rn_temp 目录下运行 npm install后又报错，错误如下：
npm ERR! path E:\TaroProjects\myApp.rn_temp\node_modules\analytics-node\node_modules\clone
npm ERR! code ENOENT
npm ERR! errno -4058
npm ERR! syscall access
npm ERR! enoent ENOENT: no such file or directory, access 'E:\TaroProjects\myApp.rn_temp\node_modules\analytics-node\node_modules\clone'
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:\Users\nd\AppData\Roaming\npm-cache_logs\2018-10-24T08_22_11_807Z-debug.log

[KimCongMax]

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

[Pines-Cheng]

'E:\TaroProjects\myApp.rn_temp\node_modules\analytics-node\node_modules\clone'

你这路径有问题啊。@kivenC

[Pines-Cheng]

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

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

[kivenC]

'E:\TaroProjects\myApp.rn_temp\node_modules\analytics-node\node_modules\clone'

你这路径有问题啊。@kivenC

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

[ztopia]

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

[Pines-Cheng]

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

[yoowei]

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

[Pines-Cheng]

下一个版本发布，文档已更新。

@Pines-Cheng 投票中已经移除了对expo的依赖，请问哪个版本会做支持，什么时候发布？

[jianqi-jin]

运行react-native壳子程序，报错 :expo-av:compileDebugJavaWithJavac，能否帮忙解决，谢谢

[Pines-Cheng]

@2359634711 看起来像是依赖安装的问题。

[wanglingsong]

目前正在把一个项目移植到RN上，发现两个问题：
1,css里的background不能使用linear-gradient函数
2,也不能使用box-shadow

[monakatyking]

运行react-native壳子程序，报错

• What went wrong:
  Execution failed for task ':expo-av:compileDebugJavaWithJavac'.

Compilation failed; see the compiler error output for details.

[tourze]

Taro.redirectTo，在使用到tabbar的情况下，表现有异常：

在“我的”这个tab，检查用户登录态，然后 Taro.redirectTo 到登录页，就会出现截图这种情形。

[Pines-Cheng]

@tourze 提一个单独的 issue？

[qiaoyixuan]

按照文档死活跑不起来rn的demo，壳子工程现在还有人维护吗

[Pines-Cheng]

@qiaoyixuan 不至于吧。。

进 RN 群可以在任意的 Taro 群 @ 我，我来拉。

[Pines-Cheng]

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

[Chen-jj]

之后单独开 issue 提问吧。

[yangqi1024]

tabBar 设置了底部栏，H5和微信小程序图片都能显示，RN显示不出图片

[Dyrixu]

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

这个可以的

[Anoninz]

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

这个可以的

@Dyrixu 请教一下这样要怎么写代码呢？