在 React Native 中添加导航的库

React Native 是一种跨平台的框架，可以使用 JavaScript 开发原生移动应用程序，并且它的生态系统非常庞大。当开发一个复杂的移动应用程序时， 通常需要在应用程序中添加导航功能。本文将介绍几个 React Native 中添加导航的库。

React Navigation

React Navigation 是一个流行的、跨平台的、用于 React Native 应用程序的导航库。该库支持多种类型的导航，包括堆栈、选项卡和抽屉。它还提供了一种灵活的方式，可以轻松地将其与现有的导航库集成。

安装

使用以下命令安装 React Navigation：

npm install react-navigation

导航示例

以下示例演示如何在 React Native 中使用堆栈导航。堆栈导航以后进入的屏幕为基础，并以后退的方式导航。

import React from 'react';
import { createStackNavigator } from '@react-navigation/stack';
import { NavigationContainer } from '@react-navigation/native';
import HomeScreen from './src/screens/HomeScreen';
import DetailsScreen from './src/screens/DetailsScreen';

const Stack = createStackNavigator();

function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="Details" component={DetailsScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

export default App;

React Native Navigation

React Native Navigation 是另一个流行的、跨平台的、用于 React Native 应用程序的导航库。与 React Navigation 不同，它是一个完全原生的导航库。

安装

使用以下命令安装 React Native Navigation：

npm install react-native-navigation

导航示例

以下示例演示如何在 React Native 中使用堆栈导航。

import { Navigation } from 'react-native-navigation';

Navigation.registerComponent('Home', () => require('./Home').default);
Navigation.registerComponent('Details', () => require('./Details').default);

Navigation.setRoot({
  root: {
    stack: {
      children: [
        {
          component: {
            name: 'Home',
          },
        },
      ],
    },
  },
});

React Native Router Flux

React Native Router Flux 是一个流行的、用于 React Native 应用程序的导航库。它支持多种类型的导航，包括堆栈、选项卡和抽屉。与 React Navigation 相比，它使用了不同的导航风格和 API，因此需要稍微学习一下。

安装

使用以下命令安装 React Native Router Flux：

npm install react-native-router-flux

导航示例

以下示例演示如何在 React Native 中使用堆栈导航。

import React from 'react';
import { Router, Scene } from 'react-native-router-flux';
import HomeScreen from './src/screens/HomeScreen';
import DetailsScreen from './src/screens/DetailsScreen';

function App() {
  return (
    <Router>
      <Scene key="root">
        <Scene key="home" component={HomeScreen} title="Home" />
        <Scene key="details" component={DetailsScreen} title="Details" />
      </Scene>
    </Router>
  );
}

export default App;

总结

本文介绍了三个流行的 React Native 导航库，它们分别是 React Navigation、React Native Navigation 和 React Native Router Flux。这三个库都有自己的优点和适用场景，程序员们可以根据自己的需求选择适合自己的导航库。