从零开始之如何在React Native中使用导航

在React Native中使用导航，我们通常会使用React Navigation库。以下是如何设置基本的React Navigation堆栈的步骤：

1. 安装React Navigation库及其依赖项：

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

2. 确保你的React Native项目已经链接了所需的原生库：

npx react-native link

3. 在项目中引入React Navigation并创建一个基本的堆栈导航器：

import React from 'react';
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();
 
const App = () => {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen 
          name="Home" 
          component={HomeScreen} 
          options={{ title: '主页' }}
        />
        <Stack.Screen 
          name="Details" 
          component={DetailsScreen} 
          options={({ route }) => ({ title: route.params.title })}
        />
      </Stack.Navigator>
    </NavigationContainer>
  );
};
 
export default App;

在这个例子中，HomeScreen是一个主页屏幕，而DetailsScreen是一个详情页面。当用户在HomeScreen点击一个项目时，可以导航到DetailsScreen显示详情。

确保你的入口文件（如index.js）包含了上述App组件。

这只是一个基本的导航设置示例。React Navigation提供了更多复杂的导航功能，如底部标签导航、侧边栏导航等，可以通过创建不同类型的导航器（navigator）并配置相应的屏幕（screen）来实现。