Taro踩坑记之React-Native环境教程
LaxusJ
0.9892019.07.27 22:56:55字数 424阅读 10,841
当前环境
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
标签：npm,坑记,taro,image,node,React,run,Taro,native
From： https://www.cnblogs.com/sexintercourse/p/16960281.html