首先，确保你已经安装了 React Navigation 相关的包：
npm install @react-navigation/native @react-navigation/stack
或者使用 Yarn：
yarn add @react-navigation/native @react-navigation/stack
然后，在你的应用中，使用 createStackNavigator 来创建堆栈导航器：
import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import HomeScreen from './HomeScreen';
import DetailsScreen from './DetailsScreen';
const Stack = createStackNavigator();
const App = () => {
return (
<NavigationContainer>
<Stack.Navigator>
<Stack.Screen name="Home" component={HomeScreen} />
<Stack.Screen name="Details" component={DetailsScreen} />
</Stack.Navigator>
</NavigationContainer>
);
};
export default App;
在这个例子中，我们创建了一个堆栈导航器，其中包含两个屏幕：HomeScreen 和 DetailsScreen。你可以使用 navigate 方法在这两个屏幕之间进行导航。
确保在每个屏幕组件中使用 navigation prop，以便访问导航功能。例如，在 HomeScreen 组件中：
import React from 'react';
import { View, Text, Button } from 'react-native';
const HomeScreen = ({ navigation }) => {
return (
<View>
<Text>Home Screen</Text>
<Button
title="Go to Details"
onPress={() => navigation.navigate('Details')}
/>
</View>
);
};
export default HomeScreen;
在这个例子中，通过 navigation.navigate('Details') 实现从 HomeScreen 到 DetailsScreen 的导航。
React Navigation 还提供了其他导航器（如 Tab 导航器、抽屉导航器等）以及丰富的配置选项，可以根据项目需求进行定制。在官方文档中可以找到更多关于 React Navigation 的详细信息和示例：[React Navigation 官方文档](https://reactnavigation.org/docs/getting-started)。
转载请注明出处：http://www.zyzy.cn/article/detail/9467/React Native