React-navigation 谁践踏了优雅 2022-10-23 12:49 167阅读 0赞 ### 文章目录 ### * React-navigation * * 一、安装 * * 1.1 安装依赖到React Native项目 # React-navigation # [React-navigation官网][React-navigation] 移动端没有像 Web 一样自带导航功能, react-navigation 是RN推荐的移动端导航工具。 ## 一、安装 ## [参考安装][Link 1] npm install @react-navigation/native 或 yarn add @react-navigation/native React Navigation由一些核心实用程序组成,然后,导航程序将这些实用程序用于在您的应用程序中创建导航结构。现在不必为此担心太多,它很快就会变得清楚起来!为了提前完成安装工作,我们还要安装和配置大多数导航器使用的依赖项,然后我们就可以开始编写一些代码了。 我们现在将安装这些库`react-native-gesture-handler`,`react-native-reanimated`,`react-native-screens`和`react-native-safe-area-context`和`@react-native-community/masked-view`。如果您已经安装了这些库,并且已安装了最新版本,则在这里完成!否则,请继续阅读。 ### 1.1 安装依赖到React Native项目 ### npm install react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view 或 yarn add react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view > 注意:安装后,您可能会收到与对等项依赖项有关的警告。它们通常是由某些软件包中指定的版本范围不正确引起的。只要您的应用可以构建,您就可以放心地忽略大多数警告。 > 注意:如果将此项目与react-native-windows一起使用,请省略react-native-gesture-handler。 从React Native 0.60及更高版本开始,[链接是自动的][Link 2]。因此,您无需运行 `react-native link`。 如果您使用Mac并正在为iOS开发,则需要安装Pod(通过Cocoapods)以完成链接。 npx pod-install ios 要完成安装`react-native-gesture-handler`,请在条目文件的顶部(确保其位于顶部,并且没有其他内容)添加以下内容,例如`index.js`或`App.js`: import 'react-native-gesture-handler'; > 注意:如果要针对Android或iOS进行构建,请不要跳过此步骤,否则即使在开发中工作正常,您的应用也可能会在生产中崩溃。这不适用于其他平台。 现在,我们需要将整个应用程序包装在中`NavigationContainer`。通常,您可以在条目文件中执行此操作,例如`index.js`或`App.js`: import 'react-native-gesture-handler'; import * as React from 'react'; import { NavigationContainer } from '@react-navigation/native'; export default function App() { return ( <NavigationContainer>{ /* Rest of your app code */}</NavigationContainer> ); } > 注意:使用导航器(例如堆栈导航器)时,您需要按照该导航器的安装说明进行操作,以获取任何其他依赖项。如果出现错误“无法解析模块”,则需要在项目中安装该模块。 [React-navigation]: https://reactnavigation.org/docs/zh-Hans/getting-started.html [Link 1]: https://reactnavigation.org/docs/getting-started/ [Link 2]: https://github.com/react-native-community/cli/blob/master/docs/autolinking.md
还没有评论,来说两句吧...