React Navigation使用要点总结

React Navigation是React Native应用中处理导航的流行库，以下总结了其核心使用技巧和最佳实践，帮助开发者更高效地构建导航结构。

导航设置与Header定制

在React Navigation中，Header的按钮定制应优先在屏幕组件内部使用navigation.setOptions来定义，而不是在Stack.Screen的options属性中定义。这是因为navigation.setOptions允许访问屏幕组件的属性和状态。例如，使用React.useLayoutEffect来动态设置Header Right按钮：

React.useLayoutEffect(() => {
  navigation.setOptions({
    headerRight: () => (
      <Button onPress={() => setCount(c => c + 1)} title="Update count" />
    ),
  });
}, [navigation]);

定制返回按钮可以通过headerBackTitle、headerTruncatedBackTitle或headerBackImage选项来实现。如果需要更灵活的控制，可以直接将HeaderBackButton组件赋值给headerLeft，或通过setOptions的headerLeft来覆盖返回按钮的行为。

对于嵌套导航器，Header的显示行为需要注意。当嵌入多级Stack Navigator时，默认会隐藏子Stack的Header。如果需要隐藏父Stack的Header并显示子Stack的Header，可以设置headerShown: false在父Stack的选项中；如果希望同时显示两者，则需在子Stack的选项中设置headerShown: true。此外，Stack Navigator支持mode="modal"属性用于模态屏幕，以及headerMode属性（推荐使用headerShown替代）来控制Header显示。

动态改变标题可以通过navigation.setOptions结合状态来实现，例如根据选择项数量更新标题：

React.useLayoutEffect(() => {
  navigation.setOptions({
    title: selectionCount === 0 ? 'Select items' : `${selectionCount} items selected`,
  });
}, [navigation, selectionCount]);

Tab Navigator的屏幕可以通过options设置tabBarLabel来定制标签文本，而Tab Bar的图标和样式可以在Tab.Navigator的screenOptions中使用tabBarIcon函数和tabBarOptions（如activeTintColor）来定义。对于状态栏，建议使用FocusAwareStatusBar组件来根据屏幕焦点动态显示StatusBar，避免在Tab或Drawer导航中产生冲突。

导航器嵌套与事件处理

导航动作（navigation actions）由当前导航器处理，如果无法处理，则会冒泡给父导航器。嵌套导航器的屏幕可以访问父导航器的特有方法，例如在Drawer Navigator内嵌Stack Navigator时，Stack屏幕可以调用openDrawer方法。然而，嵌入导航器的屏幕默认不会收到父导航器的事件（如TabNavigator的tabPress事件）。如果需要监听这些事件，可以使用navigation.dangerouslyGetParent().addListener来订阅。

例如，监听父导航器的tabPress事件：

const unsubscribe = navigation
  .dangerouslyGetParent()
  .addListener('tabPress', (e) => {
    // 执行操作
  });

父导航器的UI会渲染在子导航器之上，例如Tab Navigator下的多个Stack屏幕会始终显示Tab Bar。当导航到内嵌导航器的屏幕时，可以使用嵌套参数结构：

navigation.navigate('Root', {
  screen: 'Settings',
  params: { user: 'jane' },
});

// 更深层次的导航
navigation.navigate('Root', {
  screen: 'Settings',
  params: {
    screen: 'Sound',
    params: {
      screen: 'Media',
    },
  },
});

事件监听应优先使用useFocusEffect hook，而不是普通的useEffect，因为useFocusEffect在屏幕聚焦时自动管理订阅和清理。例如，处理硬件返回按钮：

useFocusEffect(
  React.useCallback(() => {
    const onBackPress = () => {
      if (isSelectionModeEnabled()) {
        disableSelectionMode();
        return true;
      } else {
        return false;
      }
    };
    BackHandler.addEventListener('hardwareBackPress', onBackPress);
    return () => BackHandler.removeEventListener('hardwareBackPress', onBackPress);
  }, [isSelectionModeEnabled, disableSelectionMode])
);

阻止用户离开屏幕可以使用beforeRemove事件，结合Alert提示：

React.useEffect(() =>
  navigation.addListener('beforeRemove', (e) => {
    if (!hasUnsavedChanges) return;
    e.preventDefault();
    Alert.alert(
      'Discard changes?',
      'You have unsaved changes. Are you sure to discard them and leave the screen?',
      [
        { text: "Don't leave", style: 'cancel', onPress: () => {} },
        {
          text: 'Discard',
          style: 'destructive',
          onPress: () => navigation.dispatch(e.data.action),
        },
      ]
    );
  }),
  [navigation, hasUnsavedChanges]
);

聚焦状态可以通过useIsFocused hook获取，它会在焦点变化时触发重新渲染，而navigation.isFocused()方法则不会。对于昂贵操作，建议在useFocusEffect中使用InteractionManager.runAfterInteractions来延迟执行，直到动画完成。

导航器类型与动态配置

React Navigation支持多种导航器类型：

• Tab Navigator：通过@react-navigation/bottom-tabs安装，可使用tabBarBadge在options中设置徽标。
• Drawer Navigator：通过@react-navigation/drawer安装，提供openDrawer和closeDrawer方法，以及useIsDrawerOpen hook来检查状态。

动态导航器配置允许根据状态（如用户登录状态）条件渲染不同的屏幕。例如，在应用启动时显示加载屏幕，然后根据token决定显示登录或主屏幕：

if (state.isLoading) {
  return <SplashScreen />;
}
return (
  <Stack.Navigator>
    {state.userToken == null ? (
      <Stack.Screen
        name="SignIn"
        component={SignInScreen}
        options={{
          title: 'Sign in',
          animationTypeForReplace: state.isSignout ? 'pop' : 'push',
        }}
      />
    ) : (
      <Stack.Screen name="Home" component={HomeScreen} />
    )}
  </Stack.Navigator>
);

循环创建屏幕可以使用Object.entries结合条件映射：

const commonScreens = {
  Help: HelpScreen,
};
<Stack.Navigator>
  {Object.entries({
    ...commonScreens,
    ...(isLoggedIn ? userScreens : authScreens),
  }).map(([name, component]) => (
    <Stack.Screen key={name} name={name} component={component} />
  ))}
</Stack.Navigator>;

安全区域处理推荐使用react-native-safe-area-context库的SafeAreaProvider和useSafeAreaInsets hook，以确保内容适应设备凹口。

实用技巧与Hook使用

非屏幕组件可以通过useNavigation hook访问navigation对象，它基于React Context实现。此外，可以通过创建ref来全局访问导航方法：

// RootNavigation.js
export const navigationRef = React.createRef();
export function navigate(name, params) {
  navigationRef.current?.navigate(name, params);
}

// 在入口设置ref
import { navigationRef } from './RootNavigation';
export default function App() {
  return (
    <NavigationContainer ref={navigationRef}>{/* ... */}</NavigationContainer>
  );
}

参数访问应使用可选链和空值合并运算符提供默认值：route.params?.someParam ?? 'defaultValue'。

导航状态可以通过useNavigationState hook获取（会在值变化时重新渲染），或通过navigation.dangerouslyGetState()（不会触发渲染）。事件监听器可以直接在屏幕定义时通过listeners属性添加，例如处理tabPress事件：

<Tabs.Screen
  name="Chat"
  component={Chat}
  listeners={({ navigation, route }) => ({
    tabPress: e => {
      e.preventDefault();
      navigation.navigate('AnotherPlace');
    },
  })}
/>

最后，useFocusEffect在依赖项不变时会缓存callback，避免重复执行，适合用于数据订阅和清理操作。