Taro踩坑记之React-Native环境教程
![](https://upload.jianshu.io/users/upload_avatars/2953846/cecefb9d-2f71-48bf-871b-d6f8d4d1c8d4.jpg?imageMogr2/auto-orient/strip|imageView2/1/w/96/h/96/format/webp)
当前环境
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. 壳工程闪退
![](https://upload-images.jianshu.io/upload_images/2953846-958651c22d356b38.png?imageMogr2/auto-orient/strip|imageView2/2/w/1200/format/webp)
路径: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格式
![](https://upload-images.jianshu.io/upload_images/2953846-facd239f6dc1522a.png?imageMogr2/auto-orient/strip|imageView2/2/w/636/format/webp)
![](https://upload-images.jianshu.io/upload_images/2953846-113e92584ac37b1e.png?imageMogr2/auto-orient/strip|imageView2/2/w/690/format/webp)
相关issues
https://github.com/NervJS/taro/issues/3921
https://github.com/NervJS/taro/issues/3546
8. expo/av问题
![](https://upload-images.jianshu.io/upload_images/2953846-300b3407f0eca1cf.png?imageMogr2/auto-orient/strip|imageView2/2/w/640/format/webp)
修改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我跳了起来!
![](https://upload-images.jianshu.io/upload_images/2953846-11602970480d145a.png?imageMogr2/auto-orient/strip|imageView2/2/w/664/format/webp)