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

几乎每个移动应用程序都需要在不同的屏幕之间导航。 React Native 提供了一个优雅且易于使用的库来为原生应用程序添加导航：react-navigation。它是 React Native 应用程序中用于路由和导航的最流行的库之一。

多个屏幕之间的转换由导航器管理。 React Navigation 允许各种导航器，如 Stack Navigator、Drawer Navigator、Tab Navigator 等。除了在多个屏幕之间导航之外，它还可以用于在它们之间共享数据。

方法：我们将使用 React Navigation 提供的 StackNavigator。它用于允许屏幕之间的转换，其中每个新屏幕都放置在堆栈顶部。在我们的示例中，我们将创建 3 个屏幕并使用 StackNavigator 在它们之间进行转换。我们还将学习如何将数据从一个屏幕传递到另一个屏幕，并将其与基本转换一起显示在屏幕标题中。

创建应用程序和安装模块：

• 第 1 步：打开终端并通过以下命令安装 expo-cli。

  npm install -g expo-cli

• 第2步：现在通过以下命令创建一个项目。

  expo init react-navigation-routing

• 第 3 步：现在进入您的项目文件夹，即 react-navigation-routing

  cd react-navigation-routing

• 第 4 步：使用以下命令安装所需的软件包：

  npm install –save react-navigation react-navigation-stack react-native-reanimated react-native-gesture-handler react-native-screens react-native-vector-icons

项目结构：项目目录应如下所示：

示例：在本示例中，我们将创建 3 个屏幕，即主屏幕、配置文件屏幕和设置屏幕。我们将使用 Stack Navigator 并使用一些基本样式对其进行配置。我们还将从一个屏幕动态发送数据并将其显示为另一个屏幕上的标题标题（在主屏幕上从用户那里获取输入，将其传递给配置文件屏幕，并将其显示在配置文件屏幕的标题上。

该文件包含基本的 Navigator 设置。我们将使用 react-navigation-stack 库提供的 createStackNavigator() 方法来创建我们的堆栈导航器。使用默认导航选项为所有 3 个屏幕提供了一些基本样式。

App.js

import React from "react";
import { createAppContainer } from "react-navigation";
import { createStackNavigator } from "react-navigation-stack";
  
import HomeScreen from "./screens/HomeScreen";
import ProfileScreen from "./screens/ProfileScreen";
import SettingsScreen from "./screens/SettingsScreen";
  
const AppNavigator = createStackNavigator(
  {
    Home: HomeScreen,
    Profile: ProfileScreen,
    Settings: SettingsScreen,
  },
  {
    defaultNavigationOptions: {
      headerStyle: {
        backgroundColor: "#006600",
      },
      headerTintColor: "#FFF",
    },
  }
);
  
const Navigator = createAppContainer(AppNavigator);
  
export default function App() {
  return (
    
      
    
  );
}

这是我们堆栈的第一个屏幕。在此屏幕中，我们将要求用户提供配置文件名称作为我们将传递给“配置文件”屏幕的输入。

HomeScreen.js

import React, { useState } from "react";
import { Text, View, TextInput, Button } from "react-native";
import { Ionicons } from "@expo/vector-icons";
  
const Home = (props) => {
  const [input, setInput] = useState("");
  return (
    
      Home Screen!
      
       setInput(value)}
      />
      
          props.navigation.navigate("Profile", { username: input })
        }
      />
    
  );
};
  
export default Home;

此屏幕将使用 navData 对象接收用户在主屏幕中提供的输入，并将其显示在其标题中。

ProfileScreen.js

import React from "react";
import { Text, View, Button } from "react-native";
import { Ionicons } from "@expo/vector-icons";
  
const Profile = (props) => {
  return (
    
      Profile Screen!
      
       props.navigation.navigate("Settings")}
      />
    
  );
};
  
Profile.navigationOptions = (navData) => {
  return {
    headerTitle: navData.navigation.getParam("username"),
  };
};
  
export default Profile;

这是一个简单的屏幕，带有返回主屏幕的按钮。

设置屏幕.js

import React from "react";
import { Text, View, Button } from "react-native";
import { Ionicons } from "@expo/vector-icons";
  
const Settings = (props) => {
  return (
    
      Settings Screen!
      
       props.navigation.navigate("Home")}
      />
    
  );
};
  
export default Settings;

运行应用程序的步骤：使用以下命令启动服务器。

expo start

输出：

参考： https://reactnative.dev/docs/navigation