ReactNative踩坑之旅: Unable to resolve module 和 Error: Plugin

原文: https://blog.csdn.net/j550341130/article/details/81027700

具体流程请看这个, 感谢分享:
https://blog.csdn.net/qiyei2009/article/details/78820207

我是在windows搭建的, 过程中碰见了很多问题, 大多数简单的搜索就可以解决, 但有两个较难排查, 现在记录于下
ps. 建议别用windows自带的命令行, 出现问题后报错信息不能复制是个坑, 建议用WebStorm自带的Terminal, 自动转入项目路径, 且文字均能复制, 解决了一些麻烦.

在github上存放了一份Demo:
https://github.com/YouCii/RNDemo

Unable to resolve module AccessibilityInfo from XXX

android启动后大红屏错误, 具体信息是这个

Unable to resolve module `AccessibilityInfo` from `xxx\node_modules\react-native\Libraries\
react-native\react-native-implementation.js`: Module does not exist in the module map

This might be related to https://github.com/facebook/react-native/issues/4968
To resolve try the following:
  1. Clear watchman watches: `watchman watch-del-all`.
  2. Delete the `node_modules` folder: `rm -rf node_modules && npm install`.
  3. Reset Metro Bundler cache: `rm -rf $TMPDIR/react-*` or `npm start -- --reset-cache`.  
  4. Remove haste cache: `rm -rf $TMPDIR/haste-map-react-native-packager-*`.

按照报错信息中的四个方法都没有解决此问题, 后来在github的问题讨论中找到了一条不起眼的答案.
按照上面教程走下来后安装的是最新的ReactNative(现在是0.56), 这个问题可能是新版本的bug, 降级到0.55即可.

降级流程:
1. 在工程目录下执行 E:\ReactNative\Test>npm install --save [email protected];
2. 然后 E:\ReactNative\Test>react-native upgrade, 这里会提示你要不要覆盖原来的部分文件, 我是一路y, 最后提示 Successfully upgraded this project to react-native v0.55.4;
3. 接下来再运行, 提示一个android目录下build错误, 我猜应该是build旧文件的错误, 所以删掉了android目录下的几个build文件夹;
4. 又有问题( 如果没有这么多问题就跳过这些步骤 ): MainApplication 内找不到 BuildConfig ,代码问题好办, 用AS打开, import BuildConfig 就可以了.

另外, Unable to resolve module react-navigation from 可以用 npm install react-navigation@https://github.com/react-community/react-navigation.git --save 解决.

至此, mission complete, 来到下一个问题(手动滑稽)

Module build failed: Error: Plugin 0 specified in “base” … provided an invalid property of “default”

也是个大红屏错误, 是在babel-preset-react-native包里的文件错误, 看了下那个文件, 没有几行代码.

最后在 https://github.com/facebook/react-native/issues/15545 的回答中找到适合我的方法.

执行 npm install --save-dev [email protected] 后再次运行即可, 终于看到梦寐以求的界面了

这里写图片描述

如何同时运行两个RN项目

我们知道, 有时候运行项目时会报错 8081端口被占用, 一般都是因为启动过一个项目的原因, 在任务管理器中杀掉node.js即可.
但如果我们不想杀掉它呢, 我就是想同时跑两个项目, 这也是可以的, 在这个文件中可以配置
这里写图片描述
在service.js的61行( 可能不同的版本不一样 )处修改8081为想要的其他端口即可, 注意手机上也要重新配置端口