如何在 React Native 中使用带有 React Navigation 的路由？

React Navigation 是 React Native 中最流行的第三方路由库之一，它提供了一种简单且可定制化的方式来管理应用程序的导航。本文将介绍如何在 React Native 中使用 React Navigation 的路由功能。

安装 React Navigation

首先，我们需要安装 react-navigation 和 react-native-gesture-handler 这两个库：

npm install react-navigation react-native-gesture-handler

或者

yarn add react-navigation react-native-gesture-handler

设置 Stack Navigator

Stack Navigator 是 React Navigation 中最常用的一种导航类型，它基于栈结构来管理导航。在 React Native 中使用 Stack Navigator，我们必须导入 createStackNavigator 方法，然后使用它来创建栈导航器。

以下是一个基本的 Stack Navigator 的示例代码：

import React from 'react';
import { createStackNavigator } from 'react-navigation-stack';
import { createAppContainer } from 'react-navigation';
import Screen1 from './Screen1';
import Screen2 from './Screen2';

const AppNavigator = createStackNavigator({
  Screen1: { screen: Screen1 },
  Screen2: { screen: Screen2 },
});

const AppContainer = createAppContainer(AppNavigator);

export default function App() {
  return <AppContainer />;
}

在上面的代码中，我们首先从 react-navigation-stack 中导入 createStackNavigator 方法，然后定义了两个屏幕 Screen1 和 Screen2，同时将它们包装在一个 Stack Navigator 中。最后，我们使用 createAppContainer 方法来创建应用程序的容器，并将其返回给 App 组件，以显示 Stack Navigator。

现在，我们可以在 Screen1 中通过 this.props.navigation.navigate 方法来导航到 Screen2 屏幕，如下所示：

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

export default class Screen1 extends React.Component {
  render() {
    const { navigate } = this.props.navigation;

    return (
      <View>
        <Button title="Go to Screen2" onPress={() => navigate('Screen2')} />
      </View>
    );
  }
}

在上面的代码中，我们首先从 react-native 中导入 Button 和 View 组件，然后在 render 方法中定义了一个按钮，该按钮的点击事件将导航到 Screen2 屏幕。

自定义 Stack Navigator 样式

Stack Navigator 可以通过自定义样式来实现更高度的定义化。比如修改标题栏的样式，增加标题栏的标题等等。

以下是一个示例代码：

import React from 'react';
import { createStackNavigator } from 'react-navigation-stack';
import { createAppContainer } from 'react-navigation';
import Screen1 from './Screen1';
import Screen2 from './Screen2';

const AppNavigator = createStackNavigator(
  {
    Screen1: { screen: Screen1 },
    Screen2: { screen: Screen2 },
  },
  {
    defaultNavigationOptions: {
      headerStyle: {
        backgroundColor: '#f4511e',
      },
      headerTintColor: '#fff',
      headerTitleStyle: {
        fontWeight: 'bold',
      },
    },
  }
);

const AppContainer = createAppContainer(AppNavigator);

export default function App() {
  return <AppContainer />;
}

在上面的代码中，我们在 Stack Navigator 的第二个参数中添加了 defaultNavigationOptions 属性，它可以包含所有可在 Stack Navigator 中使用的导航样式选项。在这里，我们修改了标题栏的背景颜色，标题栏的文本颜色和字体粗细。

使用 Tab Navigator

Tab Navigator 是另一种常用的导航类型，它使用标签栏来管理导航。在 React Native 中使用 Tab Navigator，我们必须导入 createBottomTabNavigator 或 createMaterialBottomTabNavigator 方法，然后使用它们来创建 Tab Navigator。

以下是一个基本的 Tab Navigator 的示例代码：

import React from 'react';
import { createBottomTabNavigator } from 'react-navigation-tabs';
import { createAppContainer } from 'react-navigation';
import Screen1 from './Screen1';
import Screen2 from './Screen2';

const AppNavigator = createBottomTabNavigator({
  Screen1: { screen: Screen1 },
  Screen2: { screen: Screen2 },
});

const AppContainer = createAppContainer(AppNavigator);

export default function App() {
  return <AppContainer />;
}

在上面的代码中，我们首先从 react-navigation-tabs 中导入 createBottomTabNavigator 方法，然后定义了两个屏幕 Screen1 和 Screen2，同时将它们包装在一个 Tab Navigator 中。最后，我们使用 createAppContainer 方法来创建应用程序的容器，并将其返回给 App 组件，以显示 Tab Navigator。

自定义 Tab Navigator 样式

Tab Navigator 可以通过自定义样式来实现更高度的定义化。比如修改标签栏的样式，增加标签栏的图标等等。

以下是一个示例代码：

import React from 'react';
import { createBottomTabNavigator } from 'react-navigation-tabs';
import { createAppContainer } from 'react-navigation';
import Screen1 from './Screen1';
import Screen2 from './Screen2';

const AppNavigator = createBottomTabNavigator(
  {
    Screen1: { screen: Screen1 },
    Screen2: { screen: Screen2 },
  },
  {
    tabBarOptions: {
      activeTintColor: '#e91e63',
      inactiveTintColor: 'gray',
      style: {
        backgroundColor: 'white',
      },
      showIcon: true,
    },
  }
);

const AppContainer = createAppContainer(AppNavigator);

export default function App() {
  return <AppContainer />;
}

在上面的代码中，我们在 Tab Navigator 的第二个参数中添加了 tabBarOptions 属性，它可以包含所有可在 Tab Navigator 中使用的导航样式选项。在这里，我们修改了选中的标签文本的颜色，未选中的标签文本的颜色，标签背景颜色和是否显示标签图标。

结论

使用 React Navigation 的路由功能是在 React Native 应用程序中实现导航的最佳实践之一。本文提供了一个详细的介绍，在实际应用中可以根据需要进行更改和扩展。