React Navigation 6.0 跨平台配置指南

React Navigation 是 React Native 生态中最流行的导航库。6.0 版本强化了跨平台兼容性，简化了配置流程。以下是关键配置步骤：

---

1. 安装核心依赖

npm install @react-navigation/native @react-navigation/native-stack
npx expo install react-native-screens react-native-safe-area-context

📌 注意：

• react-native-screens 提供原生导航性能优化
• react-native-safe-area-context 处理刘海屏/凹口屏适配

---

2. 基础配置

在入口文件（如 App.js）中初始化导航容器：

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

const Stack = createNativeStackNavigator();

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

---

3. 跨平台适配技巧

a. 平台特定参数

<Stack.Screen
  name="Profile"
  component={ProfileScreen}
  options={{
    headerTitleAlign: 'center',
    // iOS 专属配置
    ...Platform.select({
      ios: { headerLargeTitle: true },
      android: { headerShadowVisible: false }
    })
  }}
/>

b. 安全区域处理

import { SafeAreaView } from 'react-native-safe-area-context';

function HomeScreen() {
  return (
    <SafeAreaView style={{ flex: 1 }}>
      <Text>内容自动避开系统安全区域</Text>
    </SafeAreaView>
  );
}

---

4. 类型支持（TypeScript）

定义路由参数类型：

type RootStackParamList = {
  Home: undefined;
  Details: { itemId: string };
};

const Stack = createNativeStackNavigator<RootStackParamList>();

---

5. 调试工具集成

安装 Flipper 插件：

npm install react-navigation-dev-tools

在 App.js 中添加：

import { useNavigationDevTools } from '@react-navigation/dev-tools';

const App = () => {
  const navigationRef = useRef();
  useNavigationDevTools()(navigationRef);
  
  return <NavigationContainer ref={navigationRef}>{/*...*/}</NavigationContainer>;
}

---

6. 深度链接配置

a. 声明 Scheme
在 app.json 中添加：

{
  "expo": {
    "scheme": "myapp"
  }
}

b. 链接处理

<NavigationContainer
  linking={{
    prefixes: ['myapp://'],
    config: {
      screens: {
        Home: '',
        Details: 'details/:itemId'
      }
    }
  }}
>

---

常见问题解决

问题现象	解决方案
安卓返回键失效	安装 react-native-gesture-handler 并在入口文件顶部调用 import 'react-native-gesture-handler'
iOS 页面切换卡顿	在 App.js 添加 import { enableScreens } from 'react-native-screens'; enableScreens(true);
TypeScript 类型报错	更新 @types/react-navigation 到最新版本

💡 最佳实践：
使用 @react-navigation/bottom-tabs + @react-navigation/drawer 实现跨平台 Tab/侧边栏导航，组件内部已处理平台差异