React Navigation 5.0 跨平台配置指南

React Navigation 5.0 采用组件化 API，显著提升了跨平台兼容性。以下是关键配置步骤：

1. 安装核心依赖

npm install @react-navigation/native
npm install react-native-reanimated react-native-gesture-handler react-native-screens

2. 基础导航容器配置

// App.js
import { NavigationContainer } from '@react-navigation/native';

export default function App() {
  return (
    <NavigationContainer>
      {/* 导航结构将在此定义 */}
    </NavigationContainer>
  );
}

3. 创建跨平台堆栈导航器

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

const Stack = createStackNavigator();

function MainStack() {
  return (
    <Stack.Navigator
      screenOptions={{
        headerStyle: { backgroundColor: '#2c3e50' },
        headerTintColor: 'white'
      }}
    >
      <Stack.Screen name="Home" component={HomeScreen} />
      <Stack.Screen name="Details" component={DetailsScreen} />
    </Stack.Navigator>
  );
}

4. 平台特定样式处理

// 使用Platform API自动适配样式
import { Platform } from 'react-native';

const headerHeight = Platform.select({
  ios: 44,
  android: 56,
  default: 64
});

<Stack.Navigator
  screenOptions={{
    headerStyle: { height: headerHeight }
  }}
/>

5. 响应式布局实现

// 使用Dimensions检测屏幕尺寸
import { Dimensions } from 'react-native';

const { width } = Dimensions.get('window');

function HomeScreen() {
  return (
    <View style={{ padding: width > 600 ? 24 : 12 }}>
      {/* 内容 */}
    </View>
  );
}

6. 安全区域处理

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

function DetailsScreen() {
  return (
    <SafeAreaView edges={['top', 'right']} style={{ flex: 1 }}>
      {/* 自动避开刘海屏/状态栏 */}
    </SafeAreaView>
  );
}

7. 平台特定组件示例

// 安卓专属返回按钮处理
import { HeaderBackButton } from '@react-navigation/stack';

<Stack.Screen
  name="Profile"
  component={ProfileScreen}
  options={{
    headerLeft: (props) => (
      Platform.OS === 'android' ? 
        <HeaderBackButton {...props} /> : 
        null
    )
  }}
/>

8. 调试技巧

# 启动远程调试
npx react-native start --reset-cache

# 检查导航状态
console.log(navigation.dangerouslyGetState());

关键注意事项：

1. 使用 Platform.OS 进行平台检测时，避免硬编码尺寸值
2. 在 Android 需在 MainActivity.java 添加：

   import com.facebook.react.ReactActivityDelegate;
   protected ReactActivityDelegate createReactActivityDelegate() {
     return new ReactActivityDelegate(this, getMainComponentName()) {
       @Override protected boolean isConcurrentRootEnabled() { return true; }
     };
   }
   

3. iOS 需在 Podfile 添加：

   pod 'RNScreens', :path => '../node_modules/react-native-screens'
   

通过以上配置，可实现代码复用率超过 85% 的跨平台导航方案，同时保持各平台原生导航体验。