React Native中使用I18nManager.forceRTL时抽屉导航无法正常工作

我之前也碰到过一模一样的问题——在强制RTL布局后，抽屉导航点击汉堡按钮只有遮罩层弹出，抽屉本身死活不显示。结合你的代码和依赖版本，给你几个实用的解决方案：

方案1：手动适配RTL下的抽屉位置与样式 #

问题根源在于旧版React Navigation的Drawer组件在RTL模式下会错误计算translateX值，导致抽屉被移出屏幕视野。你可以通过修改Drawer.Navigator的screenOptions来修复：

function DrawerNavigator() {
  return (
    <Drawer.Navigator 
      initialRouteName='Customers' 
      screenOptions={{
        headerRight: Logout,
        // 根据RTL状态指定抽屉位置
        drawerPosition: I18nManager.isRTL ? 'right' : 'left',
        // 强制覆盖错误的translateX样式
        drawerStyle: {
          transform: I18nManager.isRTL ? [{ translateX: 0 }] : undefined,
        },
        // 确保遮罩层正常显示（可选，解决部分遮罩不生效的情况）
        overlayColor: 'rgba(0, 0, 0, 0.5)'
      }}
    >
      <Drawer.Screen name="Home" component={HomeScreen} options={{title: Lang.Navigation.Home}} />
      <Drawer.Screen name="Customers" component={CustomersScreen} options={{title: Lang.Navigation.Customers}} />
    </Drawer.Navigator>
  )
}

另外注意：你的DrawerNavigator外层包裹了一个多余的View，直接移除它可以避免不必要的布局层级干扰，抽屉组件本身已经是容器级组件。

方案2：升级React Navigation依赖版本 #

你当前使用的@react-navigation/drawer@6.1.8和@react-navigation/native@6.0.6属于较早的版本，存在已知的RTL兼容bug。尝试升级到同大版本的稳定补丁包（或兼容你Expo 44的最新版本）：

{
  "@react-navigation/drawer": "^6.6.3",
  "@react-navigation/native": "^6.1.6",
  "@react-navigation/native-stack": "^6.9.12"
}

升级后记得执行expo install或npm install同步依赖，很多RTL相关的布局问题在新版本中已经被修复。

方案3：自定义抽屉动画适配RTL #

如果前两个方案都无效，可以通过自定义动画插值器来强制控制抽屉的滑动方向：

import { Animated, Easing } from 'react-native';

function DrawerNavigator() {
  return (
    <Drawer.Navigator 
      initialRouteName='Customers' 
      screenOptions={{
        headerRight: Logout,
        drawerType: 'slide',
        animationConfig: {
          transitionSpec: {
            open: {
              animation: 'timing',
              config: { duration: 300, easing: Easing.out(Easing.poly(4)) },
            },
            close: {
              animation: 'timing',
              config: { duration: 300, easing: Easing.in(Easing.poly(4)) },
            },
          },
          screenInterpolator: ({ current, layouts }) => {
            const progress = current.progress.interpolate({
              inputRange: [0, 1],
              outputRange: [0, 1],
              extrapolate: 'clamp',
            });

            return {
              drawer: {
                transform: [
                  {
                    translateX: I18nManager.isRTL
                      ? progress.interpolate({
                          inputRange: [0, 1],
                          outputRange: [layouts.drawer.width, 0],
                        })
                      : progress.interpolate({
                          inputRange: [0, 1],
                          outputRange: [-layouts.drawer.width, 0],
                        }),
                  },
                ],
              },
            };
          },
        },
      }}
    >
      {/* 你的屏幕组件 */}
    </Drawer.Navigator>
  )
}

这个方案通过手动计算RTL模式下的抽屉滑动距离，完全规避了框架内置的错误样式计算。

建议先尝试方案1（移除多余View+修改screenOptions），这个改动最小，大概率能解决你的问题；如果不行再尝试升级依赖，最后考虑自定义动画。

内容的提问来源于stack exchange，提问作者Lishar