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 < 0.60）：

npx react-native link

3. 在项目中引入React Navigation：

import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';

4. 创建导航器：

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

5. 确保在入口文件（通常是index.js）中包含导航器：

import { AppRegistry } from 'react-native';
import App from './App';
import { name as appName } from './app.json';
 
AppRegistry.registerComponent(appName, () => App);

这样就设置了一个基本的栈导航，你可以添加更多的屏幕和配置导航选项来满足具体的需求。