React Native 中如何使用 React Navigation

React Native 是一种基于 React 的移动应用开发框架，而 React Navigation 是 React Native 中最流行的导航库之一。React Navigation 提供了一组用于管理应用程序导航的组件和 API，可以轻松地创建具有导航功能的 React Native 应用程序。本文将深入讲解在 React Native 中如何使用 React Navigation，包括安装、配置和使用。

安装 React Navigation

首先，我们需要使用 npm 安装 React Navigation：

npm install @react-navigation/native

React Navigation 还依赖于其他一些包，我们需要安装它们：

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

配置 React Navigation

在开始使用 React Navigation 之前，我们需要进行一些配置。首先，在 App.js 文件中导入所需组件：

import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';

然后，我们需要创建一个 StackNavigator，用于处理应用程序中的所有导航。我们可以在 App.js 文件中创建一个 StackNavigator，并将其包装在 NavigationContainer 中：

const Stack = createStackNavigator();

function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        {/* Screens */}
      </Stack.Navigator>
    </NavigationContainer>
  );
}

StackNavigator 中的 Screens 是我们应用程序中的所有屏幕，我们可以在其中添加屏幕：

<Stack.Navigator>
  <Stack.Screen name="Home" component={HomeScreen} />
  <Stack.Screen name="Details" component={DetailsScreen} />
</Stack.Navigator>

在上面的示例中，我们添加了两个屏幕：HomeScreen 和 DetailsScreen。这些屏幕是 React 组件，我们需要在应用程序中创建它们。

创建屏幕

现在，我们需要创建我们应用程序中的屏幕。屏幕是 React 组件，它们可以接受 props，并呈现 UI。在本例中，我们将创建一个 HomeScreen 和一个 DetailsScreen。

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

function HomeScreen({ navigation }) {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Home Screen</Text>
      <Button
        title="Go to Details"
        onPress={() => navigation.navigate('Details')}
      />
    </View>
  );
}

function DetailsScreen() {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Details Screen</Text>
    </View>
  );
}

在上面的示例中，我们创建了一个 HomeScreen 和一个 DetailsScreen。HomeScreen 包含一个 Button，当用户点击该按钮时，它将导航到 DetailsScreen。

导航

现在，我们已经创建了屏幕，我们需要在屏幕之间进行导航。React Navigation 提供了一组用于导航的 API，包括 navigate、goBack 和 push。

在我们的示例中，我们在 HomeScreen 中添加了一个 Button，用于导航到 DetailsScreen。我们可以使用 navigate API 来导航到 DetailsScreen：

<Button
  title="Go to Details"
  onPress={() => navigation.navigate('Details')}
/>

我们还可以在 DetailsScreen 中添加一个 Button，用于返回到 HomeScreen。我们可以使用 goBack API 来返回上一个屏幕：

<Button
  title="Go back"
  onPress={() => navigation.goBack()}
/>

我们还可以使用 push API 将屏幕推入堆栈：

<Button
  title="Go to Details... again"
  onPress={() => navigation.push('Details')}
/>

完整示例代码

下面是一个完整的示例代码，其中包括创建屏幕和导航：

import React from 'react';
import { View, Text, Button } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';

const Stack = createStackNavigator();

function HomeScreen({ navigation }) {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Home Screen</Text>
      <Button
        title="Go to Details"
        onPress={() => navigation.navigate('Details')}
      />
    </View>
  );
}

function DetailsScreen({ navigation }) {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Details Screen</Text>
      <Button
        title="Go back"
        onPress={() => navigation.goBack()}
      />
      <Button
        title="Go to Details... again"
        onPress={() => navigation.push('Details')}
      />
    </View>
  );
}

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 Navigation 是 React Native 中最流行的导航库之一，它提供了一组用于管理应用程序导航的组件和 API。在本文中，我们讨论了如何安装、配置和使用 React Navigation，包括如何创建屏幕和导航。希望这篇文章能够帮助你开始使用 React Navigation。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65bb1ae1add4f0e0ff3b7144