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。
