在不同屏幕之间导航是移动应用程序开发的一个重要方面。使用 expo 和 react native 构建应用程序时，选择正确的导航库对于确保无缝的用户体验至关重要。本指南将探讨 expo 提供的最流行的导航选项、如何设置它们以及有效实施导航的最佳实践。

react native 中的导航概述

在 react native 中，导航允许用户在应用程序的不同屏幕之间移动。与 expo 兼容的最受欢迎的导航库是：

• react navigation：一个广泛使用的库，用于在 react native 应用程序中处理导航，非常适合 expo 项目。
• react native navigation：由 wix 开发，它提供了更原生的体验，但在 expo 项目中不太常用。

为什么将 react navigation 与 expo 结合使用？

• 易于使用：react navigation 提供了简单而灵活的 api，可以轻松集成到 expo 应用程序中。
• 社区支持：拥有庞大的社区，有大量资源、教程和文档可帮助您排除故障并增强您的导航体验。
• expo 兼容性：react navigation 与 expo 无缝协作，让您无需额外设置即可利用 expo 的功能。

---

使用 expo 设置 react 导航

安装

要在 expo 项目中开始使用 react navigation，请按照以下步骤操作：

1. 创建一个新的 expo 项目：

   expo init mynavigationapp
   cd mynavigationapp

1. 安装 react 导航和依赖项： 在您的 expo 项目目录中，运行以下命令：

   npm install @react-navigation/native
   npm install @react-navigation/native-stack

安装所需的依赖项：

   expo install react-native-gesture-handler react-native-reanimated react-native-screens react-native-safe-area-context

基本导航设置

以下是如何使用 react navigation 设置基本的堆栈导航器：

1. 导入必要的组件：

   import react from 'react';
   import { navigationcontainer } from '@react-navigation/native';
   import { createnativestacknavigator } from '@react-navigation/native-stack';
   import homescreen from './screens/homescreen';
   import detailsscreen from './screens/detailsscreen';

1. 创建堆栈导航器：

   const stack = createnativestacknavigator();

1. 用 navigationcontainer 包装您的应用程序：

   const app = () => {
     return (
       <navigationcontainer><stack.navigator initialroutename="{'home'}"><stack.screen name="{'home'}" component="{homescreen}"></stack.screen><stack.screen name="{'details'}" component="{detailsscreen}"></stack.screen></stack.navigator></navigationcontainer>
     );
   };

   export default app;

创建屏幕

接下来，让我们创建 homescreen 和 detailss​​creen 组件。

homescreen.js

import react from 'react';
import { view, text, button } from 'react-native';

const homescreen = ({ navigation }) => {
  return (
    <view><text>home screen</text><button title="{'go" to details onpress="{()"> navigation.navigate('details')} /&gt;
    </button></view>
  );
};

export default homescreen;

detailss​​creen.js

import react from 'react';
import { view, text, button } from 'react-native';

const detailsscreen = ({ navigation }) => {
  return (
    <view><text>details screen</text><button title="{'go" back onpress="{()"> navigation.goback()} /&gt;
    </button></view>
  );
};

export default detailsscreen;

---

导航器的类型

1. 堆栈导航器

stack navigator 用于具有类似堆栈行为的简单导航。屏幕被推入堆栈并可以弹出。

2. 选项卡导航器

选项卡导航器提供选项卡式界面，允许用户在不同屏幕之间切换。

安装：

npm install @react-navigation/bottom-tabs

设置：

import { createbottomtabnavigator } from '@react-navigation/bottom-tabs';

const tab = createbottomtabnavigator();

const app = () => {
  return (
    <navigationcontainer><tab.navigator><tab.screen name="{'home'}" component="{homescreen}"></tab.screen><tab.screen name="{'details'}" component="{detailsscreen}"></tab.screen></tab.navigator></navigationcontainer>
  );
};

3.抽屉导航器

抽屉式导航器提供侧边菜单进行导航。

安装：

npm install @react-navigation/drawer

设置：

import { createdrawernavigator } from '@react-navigation/drawer';

const drawer = createdrawernavigator();

const app = () => {
  return (
    <navigationcontainer><drawer.navigator><drawer.screen name="{'home'}" component="{homescreen}"></drawer.screen><drawer.screen name="{'details'}" component="{detailsscreen}"></drawer.screen></drawer.navigator></navigationcontainer>
  );
};

---

在屏幕之间传递参数

您可以使用以下方式在导航到另一个屏幕时传递参数：

navigation.navigate('details', { itemid: 42 });

并访问目标屏幕中的参数：

const DetailsScreen = ({ route }) => {
  const { itemId } = route.params;
  return <text>Item ID: {itemId}</text>;
};

---

世博会导航最佳实践

1. 保持导航层次结构简单：避免深层嵌套的导航器，以获得更好的可维护性和性能。
2. 使用类型安全：如果使用 typescript，请为导航参数定义类型接口。
3. 优化性能：使用 react navigation 的内置性能优化，例如屏幕延迟加载。
4. 辅助功能注意事项：通过添加适当的标签和角色来确保您的导航组件可访问。

---

结论

使用 react navigation 在 expo 应用程序的屏幕中导航可提供流畅的用户体验，并且可以轻松设置。通过遵循最佳实践并了解不同的导航类型，您可以创建用户喜爱的强大应用程序。

---

保持联系

感谢您关注本 react native navigation with expo 指南！如果您想了解更多内容或与我联系，请随时关注我：

• linkedin：vincent odukwe
• github：vrinch
• x（以前的 twitter）：@vrinchofficial

编码愉快，我期待与您联系！

以上就是使用 Expo 探索 React Native 导航：完整指南的详细内容，更多请关注php中文网其它相关文章！