使用 Expo 探索 React Native 导航：完整指南

百变鹏仔 2个月前 (10-13) #JavaScript

文章标签完整

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

react native 中的导航概述

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

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

使用 expo 设置 react 导航

安装

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

创建一个新的 expo 项目：

   expo init mynavigationapp   cd mynavigationapp

安装 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 设置基本的堆栈导航器：

导入必要的组件：

   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';

创建堆栈导航器：

   const stack = createnativestacknavigator();

用 navigationcontainer 包装您的应用程序：

   const app = () =&gt; {     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 和 detailsscreen 组件。

homescreen.js

import react from 'react';import { view, text, button } from 'react-native';const homescreen = ({ navigation }) =&gt; {  return (    <view><text>home screen</text><button title="{'go" to details onpress="{()"> navigation.navigate('details')} /&gt;    </button></view>  );};export default homescreen;

detailsscreen.js

import react from 'react';import { view, text, button } from 'react-native';const detailsscreen = ({ navigation }) =&gt; {  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 = () =&gt; {  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 = () =&gt; {  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 }) =&gt; {  const { itemId } = route.params;  return <text>Item ID: {itemId}</text>;};

世博会导航最佳实践

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

结论

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

保持联系

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

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

文章推荐