使用 Expo 探索 React Native 导航：完整指南-js教程-PHP中文网

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

花韻仙語

发布： 2024-10-12 10:30:06

转载

815人浏览过

使用 expo 探索 react native 导航：完整指南

在不同屏幕之间导航是移动应用程序开发的一个重要方面。使用 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，请按照以下步骤操作：

创建一个新的 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 = () => {
     return (
       <navigationcontainer>
         <stack.navigator initialroutename={'home'}>
           <stack.screen name={'home'} component={homescreen} />
           <stack.screen name={'details'} component={detailsscreen} />
         </stack.navigator>
       </navigationcontainer>
     );
   };

   export default app;

登录后复制

创建屏幕

接下来，让我们创建 homescreen 和 detailsscreen 组件。

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')} />
    </view>
  );
};

export default homescreen;

登录后复制

detailsscreen.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()} />
    </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 name={'details'} component={detailsscreen} />
      </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 name={'details'} component={detailsscreen} />
      </drawer.navigator>
    </navigationcontainer>
  );
};

登录后复制

在屏幕之间传递参数

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

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

登录后复制

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

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

登录后复制

世博会导航最佳实践

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

结论

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

保持联系

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

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

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

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