美文网首页taro
Taro踩坑记之React-Native环境教程

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

作者: LaxusJ | 来源:发表于2019-07-27 22:56 被阅读0次

    当前环境
    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

    相关文章

      网友评论

        本文标题:Taro踩坑记之React-Native环境教程

        本文链接:https://www.haomeiwen.com/subject/khkhkctx.html