RN-Navigation

最新推荐文章于 2024-02-20 17:45:00 发布

原创最新推荐文章于 2024-02-20 17:45:00 发布 · 430 阅读

0 ·

CC 4.0 BY-SA版权

RN 专栏收录该内容

5 篇文章

订阅专栏

本文记录了在React Native项目中整合Navigation模块所遇到的挑战，包括版本不兼容、端口占用和react-native-gesture-handler的链接问题。通过解决一系列常见错误，如'null is not an object'和'Module不存在'，最终成功导入并运行Navigation模块。开发流程涉及react-navigation和react-native-gesture-handler两个库，其中后者需要手动link。遵循错误提示进行清理缓存和重置，完成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:

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

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

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