如何在React原生中正确使用导航

在React原生中，通常使用React Navigation库来实现导航功能。React Navigation提供了一系列的导航器组件，如StackNavigator、TabNavigator和DrawerNavigator，用于创建各种导航结构。

基础概念

React Navigation 是一个用于React Native应用程序的导航库，它提供了一系列的导航器组件，用于在不同的屏幕之间进行导航。

安装步骤

首先，你需要安装React Navigation及其相关依赖：

npm install @react-navigation/native

然后安装所需的导航器，例如StackNavigator：

npm install @react-navigation/stack

使用示例

以下是一个简单的使用StackNavigator的例子：

import 'react-native-gesture-handler';
import * as React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';

const Stack = createStackNavigator();

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

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

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