RN-Navigation

在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:

  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 /tmp/metro-bundler-cache-* or npm start -- --reset-cache.
  4. Remove haste cache: rm -rf /tmp/haste-map-react-native-packager-*. (null))

然后仔细地按照报错提示走完流程,终于是运行起来了

接着进入navigaiton的正常开发联系

你可能感兴趣的:(RN)