React Native使用React Navigation进行页面跳转

后端阿瑟 1
Viewed 0

React Native使用React Navigation进行页面跳转

一、前言

我们知道一个移动应用肯定不会只有一个页面，对于有多页面的应用，页面之间需要相互跳转。在Android系统中，页面通过Activity栈进行管理，由AMS（ActivityManagerService）实现页面跳转；而在React Native中，我们使用导航器（navigator）组件来实现页面之间的跳转。

二、React Navigation

React Navigation是一个独立的导航库，其视图是原生组件，同时用到了运行在原生线程上的Animated动画库，因而性能表现流畅。此外，其动画形式和手势都非常便于定制。React Native提供了StackNavigator、TabNavigator和DrawerNavigator三种类型的导航器来实现不同形式的页面切换。

React Navigation使用步骤

  1. 导入react-navigation包

    使用npm安装：

    npm install @react-navigation/native

    使用yarn安装：

    yarn add @react-navigation/native

  2. 导入相关的依赖项

    需要安装这些依赖库：react-native-gesture-handler、react-native-reanimated、react-native-screens、react-native-safe-area-context和@react-native-community/masked-view。

    使用npm安装：

    npm install react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view

    使用yarn安装：

    yarn add react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view

  3. 创建navigator

    React Navigation有三种默认的navigator：StackNavigator、TabNavigator和DrawerNavigator。

StackNavigator

StackNavigator类似于Android中的Activity栈，每次新打开的页面位于栈顶，每次只渲染一个页面，并提供页面之间跳转的方法。

使用StackNavigator需要添加@react-navigation/stack依赖。

使用npm安装：

npm install @react-navigation/stack

使用yarn安装：

yarn add @react-navigation/stack

示例需求：一个应用有两个页面ScreenA和ScreenB。ScreenA中有一个按钮可以跳转至ScreenB，ScreenB中有一个按钮可以返回至ScreenA。

首先创建两个页面：

ScreenA:

import React, { Component } from 'react';
import { View, Text, Button } from 'react-native';

export default class ScreenA extends Component {
  constructor(props) {
    super(props);
  }

  render() {
    const { navigation } = this.props;
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <Text>ScreenA</Text>
        <Button
          title='跳转到ScreenB'
          onPress={() => {
            navigation.navigate('ScreenB');
          }}
        />
      </View>
    );
  }
}

ScreenB:

import React, { Component } from 'react';
import { View, Text, Button } from 'react-native';

export default class ScreenB extends Component {
  render() {
    const { navigation } = this.props;
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <Text>ScreenB</Text>
        <Button
          title='返回'
          onPress={() => {
            navigation.goBack();
          }}
        />
      </View>
    );
  }
}

创建StackNavigation导航器：

import React, { Component } from 'react';
import { View } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import ScreenA from './ScreenA';
import ScreenB from './ScreenB';

const Stack = createStackNavigator();

export default class RootStack extends Component {
  render() {
    return (
      <NavigationContainer>
        <Stack.Navigator>
          <Stack.Screen name='ScreenA' component={ScreenA} />
          <Stack.Screen name='ScreenB' component={ScreenB} />
        </Stack.Navigator>
      </NavigationContainer>
    );
  }
}

然后在App.js中直接使用RootStack即可。

通过使用StackNavigator，可以实现ScreenA跳转至ScreenB，ScreenB返回至ScreenA的需求。

TabNavigator

TabNavigator用于实现选项卡页面切换，类似于Android中的TabLayout。

使用TabNavigator需要添加@react-navigation/bottom-tabs依赖。

使用npm安装：

npm install @react-navigation/bottom-tabs

使用yarn安装：

yarn add @react-navigation/bottom-tabs

示例需求：一个应用主页面中有两个选项卡，点击选项卡可切换页面（TabScreenA和TabScreenB），选项卡包含图标和文字。

首先创建选项卡页面：

TabScreenA:

import React, { Component } from 'react';
import { View, Text } from 'react-native';

export default class TabScreenA extends Component {
  render() {
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <Text>TabScreenA</Text>
      </View>
    );
  }
}

TabScreenB:

import React, { Component } from 'react';
import { View, Text } from 'react-native';

export default class TabScreenB extends Component {
  render() {
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <Text>TabScreenB</Text>
      </View>
    );
  }
}

创建选项卡导航器：

import React, { Component } from 'react';
import { Image } from 'react-native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { NavigationContainer } from '@react-navigation/native';
import TabScreenA from './TabScreenA';
import TabScreenB from './TabScreenB';

const Tab = createBottomTabNavigator();

export default class MainTab extends Component {
  render() {
    return (
      <NavigationContainer>
        <Tab.Navigator
          screenOptions={({ route }) => ({
            tabBarIcon: ({ focused }) => {
              let source = '';
              if (route.name == 'TabScreenA') {
                if (focused) {
                  source = require('./image/tab_a_select.png');
                } else {
                  source = require('./image/tab_a_gray.png');
                }
              } else if (route.name == 'TabScreenB') {
                if (focused) {
                  source = require('./image/tab_b_select.png');
                } else {
                  source = require('./image/tab_b_gray.png');
                }
              }
              return <Image source={source} style={{ width: 40, height: 40 }} />;
            },
          })}
          tabBarOptions={{
            activeTintColor: 'red',
            inactiveTintColor: '#dbdbdb',
            showIcon: true,
          }}
        >
          <Tab.Screen name='TabScreenA' component={TabScreenA} />
          <Tab.Screen name='TabScreenB' component={TabScreenB} />
        </Tab.Navigator>
      </NavigationContainer>
    );
  }
}

然后在App.js中直接使用MainTab即可实现选项卡切换。

DrawerNavigator

DrawerNavigator类似于Android中的DrawerLayout抽屉布局，可以通过拖拽滑出侧滑菜单。

使用DrawerNavigator需要添加@react-navigation/drawer依赖。

使用npm安装：

npm install @react-navigation/drawer

使用yarn安装：

yarn add @react-navigation/drawer

示例需求：一个应用的主界面MainScreen，可从左侧拖出侧滑菜单。

创建主界面MainScreen：

import React, { Component } from 'react';
import { View, Text } from 'react-native';

export default class MainScreen extends Component {
  render() {
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <Text style={{ fontSize: 30 }}>主页面</Text>
      </View>
    );
  }
}

创建侧滑菜单内容组件DrawerMenu：

import React, { Component } from 'react';
import { View, Text, TouchableHighlight } from 'react-native';

export default class DrawerMenu extends Component {
  constructor(props) {
    super();
  }

  render() {
    const { navigation } = this.props;
    return (
      <View>
        <TouchableHighlight
          style={{ padding: 15 }}
          onPress={() => {
            navigation.closeDrawer();
          }}
        >
          <Text style={{ fontSize: 20 }}>菜单选项A</Text>
        </TouchableHighlight>
        <TouchableHighlight
          style={{ padding: 15 }}
          onPress={() => {
            navigation.closeDrawer();
          }}
        >
          <Text style={{ fontSize: 20 }}>菜单选项B</Text>
        </TouchableHighlight>
        <TouchableHighlight
          style={{ padding: 15 }}
          onPress={() => {
            navigation.closeDrawer();
          }}
        >
          <Text style={{ fontSize: 20 }}>菜单选项C</Text>
        </TouchableHighlight>
      </View>
    );
  }
}

创建抽屉布局导航器MainDrawer：

import React, { Component } from 'react';
import { View } from 'react-native';
import { createDrawerNavigator } from '@react-navigation/drawer';
import { NavigationContainer } from '@react-navigation/native';
import MainScreen from './MainScreen';
import DrawerMenu from './DrawerMenu';

const Drawer = createDrawerNavigator();

export default class MainDrawer extends Component {
  constructor(props) {
    super(props);
  }

  render() {
    return (
      <NavigationContainer>
        <Drawer.Navigator
          drawerContent={(props) => {
            return <DrawerMenu {...props} />;
          }}
        >
          <Drawer.Screen name='MainScreen' component={MainScreen} />
        </Drawer.Navigator>
      </NavigationContainer>
    );
  }
}

然后在App.js中直接使用MainDrawer即可。

以上是三种导航器的基本使用。每种导航器还有详细配置，可以直接去React Navigation官网（https://reactnavigation.org/）查看，根据需求进行特定配置。

react-native
0 Answers
Related
React Navigation 在 React Native 中实现导航与跳转
React Native 中 React Navigation 导航器使用详解
React Native导航配置指南：使用React Navigation详解
React Navigation 5.x迁移指南：从4.x升级到新版本
React Native React Navigation 导航使用完全指南