Skip to content

React Navigation简介

· 5 min

从本章起我们开始学习 RN 社区相关的生态库。RN 的社区生态相当丰富，很多东西官方没有提供，但是在社区已经有了很好的解决方案。

这里首当其冲要介绍的就是 React Navigation，这是一个诞生于社区的 RN 导航库。

本小节将介绍如下的内容：

什么是 React Navigation#

React Navigation 的诞生，源于 RN 社区对基于 Javascript 的可扩展且使用简单的导航解决方案的需求。

React Navigation 是 Facebook、Expo 和 React 社区的开发者们合作的结果：它取代并改进了 RN 生态系统中的多个导航库，其中包括 Ex-Navigation、RN 官方的 Navigator 和 NavigationExperimental 组件。

学习 React Navigation，可以阅读官方的文档：https://reactnavigation.org/

image-20220624100945915

React Navigation 特点

在 React Navigation 中，内置了 3 种导航器，可以帮助我们实现页面之间的跳转。

主要包含以下 3 种导航器：

React Navigation 安装#

接下来，要使用 React Navigation 首先第一步肯定是需要安装这个库。

关于安装，请参阅：https://reactnavigation.org/docs/getting-started

首先第一步，在项目中输入如下的命令：

npm install @react-navigation/native

安装完成后，根据官方文档的描述，还需要安装 react-native-screens 以及 react-native-safe-area-context 这两个依赖库，因为我们是使用 expo 搭建的项目，所以可以输入如下的命令：

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

具体操作如下图：

image-20220624101005788

注：如果安装途中遇到任何网络超时问题，请自行解决科学上网问题

快速体验 React Navigation#

安装完成后，我们就可以来书写一个简单的 demo 来体验下 React Navigation。

由于新版本的 React Navigation 已经将导航器独立成了一个单独的包，因此我们首先需要安装要用到的导航器。

npm install @react-navigation/native-stack

具体操作如下图所示：

image-20220624101027799

接下来书写如下的测试代码：

// In App.js in a new project


import * as React from 'react'
import { View, Text, Button } 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>Home Screen</Text>
      <Button
        title="Go to Details"
        onPress={() => navigation.navigate('Details')}
      />
    </View>
  )
}


function DetailsScreen({ navigation }) {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Details Screen</Text>
      <Button
        title="Go to Details1"
        onPress={() => navigation.push('Details')}
      />
      <Button
        title="Go to Details2"
        onPress={() => navigation.navigate('Details')}
      />
      <Button title="Go to Home" onPress={() => navigation.navigate('Home')} />
      <Button title="Go back" onPress={() => navigation.goBack()} />
    </View>
  )
}


const Stack = createNativeStackNavigator()


function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen
          name="Home"
          component={HomeScreen}
          options={{ title: 'Overview' }}
        />
        <Stack.Screen name="Details" component={DetailsScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  )
}


export default App

在上面的代码中，我们首先创建了 HomeScreen 和 DetailsScreen 这两个组件，也就是我们的两个屏幕。

接下来调用 createNativeStackNavigator 方法创建了一个 Stack 导航的实例对象，之后通过如下的结构嵌套多个屏幕：

<NavigationContainer>
  <Stack.Navigator>
    <Stack.Screen
      name="Home"
      component={HomeScreen}
      options={{ title: 'Overview' }}
    />
    <Stack.Screen name="Details" component={DetailsScreen} />
  </Stack.Navigator>
</NavigationContainer>

可以看到，Stack.Screen 就代表一屏，因为我们现在有两屏，所以一共有两个 Stack.Screen。

在屏幕组件中，会自动传入当前的导航器实例，通过解构拿到这个导航器实例，上面常用的方法有：