React Native -NavigationContaine

NavigationContainer 是 React Navigation 库中的一个核心组件，用于包裹整个导航树。React Navigation 是一个用于在 React Native 和 React Web 中实现导航的库。

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

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

const Stack = createStackNavigator();

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

export default App;

在上述例子中：

• NavigationContainer 是整个导航树的容器，通常是应用的根组件。
• Stack.Navigator 定义了一个堆栈导航器，用于处理屏幕之间的堆栈导航。
• Stack.Screen 定义了每个屏幕（页面）以及它们对应的组件。

在实际应用中，你可以根据需要配置不同类型的导航器（如 createStackNavigator、createBottomTabNavigator 等），并嵌套使用它们以构建复杂的导航结构。

确保你的项目中已经安装了 @react-navigation/native 和相应的导航器库。你可以使用以下命令安装：

npm install @react-navigation/native @react-navigation/stack

或

yarn add @react-navigation/native @react-navigation/stack

这是一个基本的导航结构，你可以根据具体需求添加其他导航器或自定义导航选项。

在 React Navigation 中，你可以使用 useNavigation Hook 来获取当前页面所在的导航控制器。这是通过导航器提供的上下文来实现的。

以下是一个示例，演示如何使用 useNavigation 获取导航控制器：

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

const Stack = createStackNavigator();

function HomeScreen() {
  const navigation = useNavigation();

  return (
    <View>
      <Text>Home Screen</Text>
      <Button
        title="Go to Details"
        onPress={() => navigation.navigate('Details')}
      />
    </View>
  );
}

function DetailsScreen() {
  const navigation = useNavigation();

  return (
    <View>
      <Text>Details Screen</Text>
      <Button title="Go back" onPress={() => navigation.goBack()} />
    </View>
  );
}

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

export default App;

在上述例子中，useNavigation Hook 被用于获取当前页面的导航对象。这允许你在组件中使用导航器的方法，如 navigate 和 goBack。