React-Native导航库——React Natigation-JXin的博客

温馨提示

该文章距离上次更新已经过去了 490 天，文章内容可能已经过时。

简介
React Navigation 安装
Stack 栈导航器
- 下载
- 使用
Tab 导航器
- 下载
- 使用
Drawer 导航器
- 下载
- 使用
路由跳转与参数传递
- 传递参数
- 接收参数
生命周期

简介

React Navigation官方文档

React Navigation 是 RN 社区的导航库，它取代并改进了 RN 生态系统中的多个导航库，其中包括 Ex-Navigation、RN官方的 Navigator 和 NavigationExperimental 组件，现在RN官方也推荐使用React Navigation

React Navigation主要提供了3种导航器，帮助我们实现页面之间的跳转

StackNavigator：一次只渲染一个页面，并提供页面之间跳转的方法。当打开一个新的页面时，它被放置在堆栈的顶部。简单来讲，就是普通页面跳转，并且可以传递参数
TabNavigator：渲染一个选项卡，类似底部导航栏，让用户可以在同一个屏中进行几个页面之前切换
DrawerNavigator：提供一个从屏幕左侧滑入的抽屉

React Navigation 安装

安装文档

npm install @react-navigation/native

安装 React Navigation 的同时还需要安装两个依赖 react-native-screens 和 react-native-safe-area-context

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

注意

If you’re on a Mac and developing for iOS, you need to install the pods (via Cocoapods) to complete the linking.
如果使用的是Mac，且开发的是ios，那么还需要通过安装pods来完成链接，也就是执行下面的指令

npx pod-install ios

新版的 React Navigation 将每一种导航器都拆分开了，例如要使用的是底部导航栏，那么就还需要单独进行下载

npm install @react-navigation/bottom-tabs

Stack 栈导航器

下载

npm install @react-navigation/stack

同时还需要安装一个库

npm install react-native-gesture-handler

react-native-gesture-handler 库必须在入口文件 index.js 或者 app.js 的 最顶部 引入

import 'react-native-gesture-handler';

完成之后如果是在Mac上开发ios，则还是需要执行 npx pod-install ios

使用

import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';

import Login from '@/screens/Login';
import Home from '@/screens/Home';

const Stack = createStackNavigator();

function App(): React.JSX.Element {
  return (
      <NavigationContainer>
        <Stack.Navigator
          initialRouteName="Home">
          <Stack.Screen name="Home" component={Home} options={{ headerTitle: '首页' }} />
          <Stack.Screen name="Login" component={Login} options={{ headerTitle: '登录页' }} />
        </Stack.Navigator>
      </NavigationContainer>
  );
}

export default App;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

react-navigation

所有的导航都必须包含在 NavigationContainer 中，之后通过 createStackNavigator 创建栈导航器，所有的栈导航器都必须包含在 Stack.Navigator 中，每一个 Stack.Screen 都是一个页面

Tab 导航器

Tab navigation 是最常见的导航样式，它可以是底部的选项卡，也可以是标题下方的顶部选项卡

下载

npm install @react-navigation/bottom-tabs

使用

以下是官网中 底部导航栏 的demo，使用方法和 Stack navigation 类似

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>
  );
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

react-navigation

Drawer 导航器

Drawer navigation 是从左侧打开的一个抽屉

下载

npm install @react-navigation/drawer

同时需要下载 react-native-gesture-handler 和 react-native-reanimated 两个库

npm install react-native-gesture-handler react-native-reanimated

且 react-native-gesture-handler 库必须在入口文件 index.js 或者 app.js 的 最顶部 引入

import 'react-native-gesture-handler';

使用

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

const Drawer = createDrawerNavigator();

function MyDrawer() {
  return (
    <Drawer.Navigator>
      <Drawer.Screen name="Feed" component={Feed} />
      <Drawer.Screen name="Article" component={Article} />
    </Drawer.Navigator>
  );
}

1
2
3
4
5
6
7
8
9
10
11
12

路由跳转与参数传递

每一个 Screen 页面的 props 都会传入一个 navigation 对象，对象中有多种跳转路由的方法，例如

// /screens/Login/index.tsx

import React from 'react';
import { Button } from 'react-native';
import { StackNavigationProp } from '@react-navigation/stack';

type RootStackParamList = {
  Main: undefined;
};

type IndexScreenNavigationProp = StackNavigationProp<
  RootStackParamList,
  'Home'
>;

const Index: React.FC<{navigation: IndexScreenNavigationProp}> = ({
  navigation,
}) => {
  const onPress = () => {
    navigation.replace('Home');
  };
  return <Button title="登录" onPress={onPress} />;
};

export default Index;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

通过 navigation.replace 或者 navigation.navigate 就可以进行路由跳转，更多方法可以看看这个文档

传递参数

如果需要在跳转的过程中传递参数，可以把参数放在对象中作为 navigation.navigate 的第二个参数，例如：

navigation.navigate('RouteName', { param1: '' })

接收参数

在 props 中还会传入一个 route 对象，通过 route.params 就能获取传递过来的路由参数，例如：

import React from 'react';
import { Button } from 'react-native';
import { StackNavigationProp } from '@react-navigation/stack';

type RootStackParamList = {
  Main: undefined;
};

type IndexScreenNavigationProp = StackNavigationProp<
  RootStackParamList,
  'Main'
>;

const Index: React.FC<{navigation: IndexScreenNavigationProp, route: { params: Record<string, any> }}> = ({
  navigation,
  route,
}) => {
  const { param1 } = route.params;
  console.log('param1: ', param1);
  const onPress = () => {
    navigation.navigate('Main');
  };
  return <Button title="登录" onPress={onPress} />;
};

export default Index;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

生命周期

有时候我们需要在进入页面或者离开页面的时候进行一些副作用操作，例如：请求数据，react-navigation 提供了一个 hook —— useFocusEffect，来判断页面的进入和离开

import { useFocusEffect } from '@react-navigation/native';

function Profile() {
  useFocusEffect(
    React.useCallback(() => {
      // Do something when the screen is focused

      return () => {
        // Do something when the screen is unfocused
        // Useful for cleanup functions
      };
    }, [])
  );

  return <ProfileContent />;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

更多细节，可以看看官方文档