在React Native 项目中导入 Navigation模块
这个过程的学习费了差不多一天的工作量;人间地狱
其实也简单,就是重复冒出慕名奇妙的错误让我抓狂
先是 yarn add 后react-native版本不兼容,然后升级版本,有出现端口占用,清除占用端口,然后就是react-native-gesture-handler这个JB玩意在作怪。
期间出现几个RN例常错误:
1,null is not an object (evaluating ‘_RNGestureHandlerModule.default.Direction’)
2,Module react-native-gesture-handler
does not exist in the Haste module map
**下面是开发流程
Navigation模块依赖两个库:
react-navigation
react-native-gesture-handler
第一个是导航管理器,类似于iOS的UINavigationController,第二个是滑动手势,管理手势对页面跳转的控制
导入:
yarn add react-navigation
yarn add react-native-gesture-handler
react-native link react-native-gesture-handler
这个库不知道为何需要link一下,因为按照正常流程走,最后报错:
Failed to load bundle(http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false) with error:(Unable to resolve module react-native-gesture-handler
from /Users/gzkp/project/RNtest/node_modules/@react-navigation/native/src/Scrollables.js
: Module react-native-gesture-handler
does not exist in the Haste module map
This might be related to https://github.com/facebook/react-native/issues/4968
To resolve try the following:
- Clear watchman watches:
watchman watch-del-all
. - Delete the
node_modules
folder:rm -rf node_modules && npm install
. - Reset Metro Bundler cache:
rm -rf /tmp/metro-bundler-cache-*
ornpm start -- --reset-cache
. - Remove haste cache:
rm -rf /tmp/haste-map-react-native-packager-*
. (null))
然后仔细地按照报错提示走完流程,终于是运行起来了
接着进入navigaiton的正常开发联系