React Native+React Navigation 打造多级路由

在 React Native 中，为了实现多页面的跳转，开发者会用到 React Navigation 这个第三方库。React Navigation 提供了一种灵活易用的导航解决方案，可以帮助开发者在应用中实现多种导航方式，包括 Stack Navigator、Tab Navigator、Drawer Navigator 等等。

本篇文章主要介绍 React Native+React Navigation 中如何打造多级路由，其中多级路由指的是在 Stack Navigator 中嵌套其他 Navigator，例如在 Stack Navigator 中嵌套 Drawer Navigator。

一、创建 Stack Navigator

在使用 React Navigation 之前，需要安装 react-navigation 库。在命令行中运行以下命令进行安装：

npm install --save react-navigation

在创建 Stack Navigator 之前，需要先导入 createStackNavigator 方法，代码如下：

import { createStackNavigator } from 'react-navigation';

然后，调用 createStackNavigator 方法，将需要使用的 screens 传入该方法。screens 是一个对象类型的参数，用来指定每个屏幕对应的组件。

以下是一个简单的 Stack Navigator 实现示例：

// www.javascriptcn.com code example
import React, { Component } from 'react';
import { View, Text, Button } from 'react-native';
import { createStackNavigator } from 'react-navigation';

class HomeScreen extends Component {
  static navigationOptions = {
    title: 'Home',
  };

  render() {
    return (
      <View>
        <Text>Home Screen</Text>
        <Button
          title="Go to Details"
          onPress={() => this.props.navigation.navigate('Details')}
        />
      </View>
    );
  }
}

class DetailsScreen extends Component {
  static navigationOptions = {
    title: 'Details',
  };

  render() {
    return (
      <View>
        <Text>Details Screen</Text>
        <Button
          title="Go to Nested Navigator"
          onPress={() => this.props.navigation.navigate('NestedNavigator')}
        />
      </View>
    );
  }
}

const StackNavigator = createStackNavigator(
  {
    Home: HomeScreen,
    Details: DetailsScreen,
  },
  {
    initialRouteName: 'Home',
  }
);

export default StackNavigator;

其中我们使用 createStackNavigator 方法创建了一个 Stack Navigator，并传入了两个 screens：HomeScreen 和 DetailsScreen。Stack Navigator 采用的是栈式导航，首先从 HomeScreen 开始导航流程。在 HomeScreen 中，我们放置了一个 Button 组件，通过 onPress 函数跳转到 DetailsScreen。具体的跳转函数为 this.props.navigation.navigate('Details')，其中 navigate 函数的参数是一个字符串，代表需要跳转到的 screen 名称。

在 DetailsScreen 中同样放置了一个 Button 组件，通过 onPress 函数跳转到 NestedNavigator。注意，因为嵌套了其他 Navigator，所以跳转函数的参数需要写成 this.props.navigation.navigate('NestedNavigator')。

二、嵌套 Drawer Navigator

在 Stack Navigator 中嵌套 Drawer Navigator，需要在 createStackNavigator 方法的参数中传入一个名叫 navigationOptions 的对象，其中包含 drawerLabel 和 drawerIcon 两个属性。drawerLabel 是一个字符串类型的参数，用来指定该导航项在 Drawer Navigator 中显示的文本。drawerIcon 是一个 React 组件类型的参数，用来指定该导航项在 Drawer Navigator 中显示的图标。

以下是一个在 Stack Navigator 中嵌套 Drawer Navigator 的示例代码：

// www.javascriptcn.com code example
import React, { Component } from 'react';
import { View, Text, Button, TouchableOpacity } from 'react-native';
import { createStackNavigator } from 'react-navigation';
import { createDrawerNavigator } from 'react-navigation-drawer';

class HomeScreen extends Component {
  static navigationOptions = {
    title: 'Home',
  };

  render() {
    return (
      <View>
        <Text>Home Screen</Text>
        <Button
          title="Go to Details"
          onPress={() => this.props.navigation.navigate('Details')}
        />
      </View>
    );
  }
}

class DetailsScreen extends Component {
  static navigationOptions = {
    title: 'Details',
  };

  render() {
    return (
      <View>
        <Text>Details Screen</Text>
        <Button
          title="Go to Nested Navigator"
          onPress={() => this.props.navigation.navigate('NestedNavigator')}
        />
      </View>
    );
  }
}

class AboutScreen extends Component {
  static navigationOptions = {
    drawerLabel: 'About',
  };

  render() {
    return (
      <View>
        <Text>About Screen</Text>
      </View>
    );
  }
}

class ContactScreen extends Component {
  static navigationOptions = {
    drawerLabel: 'Contact',
  };

  render() {
    return (
      <View>
        <Text>Contact Screen</Text>
      </View>
    );
  }
}

const DrawerNavigator = createDrawerNavigator({
  About: {
    screen: AboutScreen,
  },
  Contact: {
    screen: ContactScreen,
  },
});

const StackNavigator = createStackNavigator(
  {
    Home: HomeScreen,
    Details: DetailsScreen,
    NestedNavigator: DrawerNavigator,
  },
  {
    initialRouteName: 'Home',
    navigationOptions: ({ navigation }) => ({
      drawerLabel: () => (
        <TouchableOpacity onPress={() => navigation.toggleDrawer()}>
          <Text>Drawer</Text>
        </TouchableOpacity>
      ),
      drawerIcon: () => (
        <TouchableOpacity onPress={() => navigation.toggleDrawer()}>
          <Text>Menu</Text>
        </TouchableOpacity>
      ),
    }),
  }
);

export default StackNavigator;

在以上示例中，我们创建了一个 DrawerNavigator 并分别将 AboutScreen 和 ContactScreen 注册到了该 Navigator 中。在 createStackNavigator 方法中，我们将 NestedNavigator 设置为 DrawerNavigator 并指定该 screen 的名称为 'NestedNavigator'。在 navigationOptions 属性中，我们定义了 drawerLabel 和 drawerIcon 这两个属性，用来在 Drawer Navigator 中自定义导航项的显示效果。

drawerLabel 和 drawerIcon 都是返回函数的属性，并且函数中需要渲染出一个 TouchableOpacity 组件。在 TouchableOpacity 组件中，我们可以使用 onPress 函数来调用 navigation.toggleDrawer() 方法，该方法用于在 Drawer Navigator 中控制导航菜单的打开和关闭。在 TouchableOpacity 中渲染的文本和图标则可以自定义。在上述示例中，我们分别使用了 Text 组件和 'Menu' 文本来渲染 drawerIcon 属性。

三、总结

至此，我们已经成功地在 React Native+React Navigation 中实现了多级路由。通过在 Stack Navigator 中嵌套其他 Navigator，可以帮助我们更好地组织应用中的各个页面，并提高用户的使用体验。

在实际项目中，还可以根据具体需求自定义各种导航方式。React Navigation 提供了丰富的导航方式和参数配置，可以根据不同的页面场景进行灵活配置，以达到最佳的使用效果。

Source: FunTeaLearn,Please indicate the source for reprints https://funteas.com/post/64883f2b48841e98946c2d63