Taro踩坑记之React-Native环境教程

当前环境
Taro CLI 1.3.10 environment info:
System:
OS: macOS 10.14.5
Shell: 3.2.57 - /bin/bash
Binaries:
Node: 10.16.0 - /usr/local/bin/node
Yarn: 1.17.3 - /usr/local/bin/yarn
npm: 6.9.0 - /usr/local/bin/npm

安装taro

使用 npm 安装 CLI
$ npm install -g @tarojs/cli

$ taro init myApp

运行h5和小程序 （很丝滑所以简略）

跑H5最简单
$ npm run dev:h5
在网页端直接能看效果

跑小程序 需要下载微信小程序客户端
$ npm run dev:weapp
然后在客户端打开对应项目可动态关联，注意不能在小程序客户端修改代码

运行react-native （划重点）

平台以安卓为例，ios应该一致，如果有不一致的地方大家可以提出来

1. clone壳工程

taro-native-shell
https://github.com/NervJS/taro-native-shell

2. 壳工程npm install

3. 壳工程执行 react-native run-android

4. 然后在myApp项目运行 npm run dev:rn

http://127.0.0.1:8081/rn_temp/index.bundle?platform=android&dev=true

5. 壳工程闪退

image.png

路径：taro-native-shell/node_modules/expo-image-picker/android/build.gradle

77:  api 'com.facebook.fresco:fresco:1.10.0' 

版本改为1.9.0
参考issues
https://github.com/NervJS/taro-native-shell/issues/4

6. 注册name保持一致

原生端MainActivity

    @Override
    protected String getMainComponentName() {
        return "taroDemo";
    }

js端路径 rn_temp/index.js

AppRegistry.registerComponent('taroDemo', () => App);

7. 把src里的jsx文件改为js格式

image.png

image.png

相关issues
https://github.com/NervJS/taro/issues/3921
https://github.com/NervJS/taro/issues/3546

8. expo/av问题

image.png

修改node_module源码
路径node_modules/@unimodules/react-native-adapter/build/NativeViewManagerAdapter.js

  const reactNativeUIConfiguration = UIManager.getViewManagerConfig(reactNativeViewName) || {
    NativeProps: {},
    directEventTypes: {},
  };

换成

  const reactNativeUIConfiguration = (UIManager.getViewManagerConfig ? UIManager.getViewManagerConfig(reactNativeViewName) : UIManager[reactNativeViewName]) || {
    NativeProps: {},
    directEventTypes: {},
  };

9.运行程序

注意不能执行npm run dev:rn 这样会重新生成代码重置掉，一切就都白干了
在控制台执行以下语句

node node_modules/react-native/local-cli/cli.js start -- --reset-cache

最后，看见hello world我跳了起来！

image.png