expo中使用react navigation 6.x笔记

最新推荐文章于 2025-06-19 17:58:49 发布
原创 最新推荐文章于 2025-06-19 17:58:49 发布 · 1.1k 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文介绍了ReactNavigation从5.x升级到6.x的主要区别，包括环境设置、依赖安装、NativeStackNavigator、BottomTabNavigator和DrawerNavigator的使用示例。虽然作者目前使用的新功能未感受到明显差异，但详细步骤帮助开发者理解升级过程。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

新版本react navigation 6.x，与5.x有什么区别呢？记个笔记吧！

文章目录

环境

条目版本
expo-cli4.10.0
React Navigation6.x
笔记日期2021年8月21日

安装依赖

最近越来越喜欢yarn了，这里就使用yarn为例。

在 React Native 项目中安装所需的包：

yarn add @react-navigation/native

在expo中执行以下：

expo install react-native-screens react-native-safe-area-context

安装 native stack navigator library

yarn add @react-navigation/native-stack

示例：导航到一个新的屏幕

在这里插入图片描述

import * as React from 'react';
import { Button, View, Text } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';

function HomeScreen({ navigation }) {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>首页</Text>
      <Button
        title="详情页面"
        onPress={() => navigation.navigate('Details')}
      />
    </View>
  );
}

function DetailsScreen() {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Details Screen</Text>
    </View>
  );
}

const Stack = createNativeStackNavigator();

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

Tab navigation

安装依赖

yarn add @react-navigation/bottom-tabs

范例

在这里插入图片描述

import * as React from 'react';
import { Text, View } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';

function HomeScreen() {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Home!</Text>
    </View>
  );
}

function SettingsScreen() {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Settings!</Text>
    </View>
  );
}

const Tab = createBottomTabNavigator();

export default function App() {
  return (
    <NavigationContainer>
      <Tab.Navigator>
        <Tab.Screen name="Home" component={HomeScreen} />
        <Tab.Screen name="Settings" component={SettingsScreen} />
      </Tab.Navigator>
    </NavigationContainer>
  );
}

Drawer navigation

安装依赖

#有依赖关系
expo install react-native-reanimated
expo install react-native-gesture-handler
yarn add @react-navigation/drawer

范例

import * as React from 'react';
import { Button, View } from 'react-native';
import { createDrawerNavigator } from '@react-navigation/drawer';
import { NavigationContainer } from '@react-navigation/native';

function HomeScreen({ navigation }) {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Button
        onPress={() => navigation.navigate('Notifications')}
        title="Go to notifications"
      />
    </View>
  );
}

function NotificationsScreen({ navigation }) {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Button onPress={() => navigation.goBack()} title="Go back home" />
    </View>
  );
}

const Drawer = createDrawerNavigator();

export default function App() {
  return (
    <NavigationContainer>
      <Drawer.Navigator initialRouteName="Home">
        <Drawer.Screen name="Home" component={HomeScreen} />
        <Drawer.Screen name="Notifications" component={NotificationsScreen} />
      </Drawer.Navigator>
    </NavigationContainer>
  );
}

总结

我目前使用的功能，对比react navigation 5.x没感觉到明显的差别。

ITKEY_
关注