添加Gluestack Menu组件后出现BackHandler.removeEventListener未定义错误

问题背景 #

原本运行正常的React Native项目，在引入Gluestack的Menu组件后触发错误：TypeError: _reactNative.BackHandler.removeEventListener is not a function (it is undefined)。未手动使用BackHandler，已尝试重装node_modules、更新Gluestack，问题仍未解决。

相关代码 #

无错误代码 #

<SafeAreaView>
  <StatusBar
    barStyle={isDarkMode ? 'light-content' : 'dark-content'}
    backgroundColor={isDarkMode ? Colors.darker : Colors.lighter}
  />
  <View style={commonStyles.pageContainer}>
    <WarehouseDropdown
      warehouseLoading={warehouseLoading}
      setWarehouseId={setWarehouseId}
      warehouseOptions={warehouseOptions}
      warehouseId={warehouseId}
      defaultWarehouseId={defaultWarehouse}
    />
    <FlatList
      contentContainerStyle={styles.mainContainer}
      data={data}
      renderItem={({item}) => <WaveRow item={item} />}
      keyExtractor={item => item._id}
      onEndReached={handleLoadMore}
      onEndReachedThreshold={0.5}
      ListFooterComponent={renderFooter}
    />
  </View>
</SafeAreaView>

引入Menu后的错误代码 #

<SafeAreaView>
  <StatusBar
    barStyle={isDarkMode ? 'light-content' : 'dark-content'}
    backgroundColor={isDarkMode ? Colors.darker : Colors.lighter}
  />
  <View style={commonStyles.pageContainer}>
    <Menu
      placement="top"
      offset={5}
      trigger={({...triggerProps}) => {
        return (
          <Button {...triggerProps}>
            <ButtonText>Menu</ButtonText>
          </Button>
        );
      }}>
      <MenuItem key="Community" textValue="Community">
        <Icon as={GlobeIcon} size="sm" className="mr-2" />
        <MenuItemLabel size="sm">Community</MenuItemLabel>
      </MenuItem>
      <MenuItem key="Settings" textValue="Settings">
        <Icon as={SettingsIcon} size="sm" className="mr-2" />
        <MenuItemLabel size="sm">Settings</MenuItemLabel>
      </MenuItem>
    </Menu>
    <WarehouseDropdown
      warehouseLoading={warehouseLoading}
      setWarehouseId={setWarehouseId}
      warehouseOptions={warehouseOptions}
      warehouseId={warehouseId}
      defaultWarehouseId={defaultWarehouse}
    />
    <FlatList
      contentContainerStyle={styles.mainContainer}
      data={data}
      renderItem={({item}) => <WaveRow item={item} />}
      keyExtractor={item => item._id}
      onEndReached={handleLoadMore}
      onEndReachedThreshold={0.5}
      ListFooterComponent={renderFooter}
    />
  </View>
</SafeAreaView>

错误栈 #

console.js:614 Warning: TypeError: _reactNative.BackHandler.removeEventListener is not a function (it is undefined)

This error is located at:
    in Overlay (created by Popover)
    in Popover
    in Unknown (created by Menu)
    in _c8 (created by WaveListScreen)
    in RCTView (created by View)
    in View (created by CssInterop.View)
    in CssInterop.View (created by WaveListScreen)
    in RCTSafeAreaView (created by CssInterop.unknown)
    in CssInterop.unknown (created by WaveListScreen)
    in WaveListScreen (created by SceneView)
    in StaticContainer
    in EnsureSingleNavigator (created by SceneView)
    in SceneView (created by NativeStackNavigator)
    in RNSScreenContentWrapper (created by ScreenContentWrapper)
    in ScreenContentWrapper (created by DebugContainer)
    in DebugContainer
    in RNSScreen (created by Animated(Anonymous))
    in Animated(Anonymous)

解决方案建议 #

1. 全局Polyfill BackHandler API #

React Native后续版本对BackHandler的API做了调整，原removeEventListener方法被替换为remove。Gluestack内部的Overlay/Popover组件仍在调用旧API，导致兼容性问题。在项目入口文件（如App.js或index.js）添加以下代码兼容：

import { BackHandler } from 'react-native';

// 为BackHandler添加removeEventListener兼容方法
if (!BackHandler.removeEventListener) {
  BackHandler.removeEventListener = BackHandler.remove;
}

2. 验证版本兼容性 #

查看Gluestack官方文档确认其支持的React Native版本范围：

• 若你的RN版本过旧，升级到Gluestack推荐的最低兼容版本
• 若RN版本较新，降级Gluestack到适配新版本的稳定版本

3. 临时修改依赖源码（应急方案） #

如果上述方法无效，可临时修改Gluestack内部代码：

1. 找到node_modules中@gluestack-ui/popover或@gluestack-ui/overlay的源码
2. 将所有BackHandler.removeEventListener替换为BackHandler.remove
3. 保存后重新运行项目

注意：此方法会在依赖重装后失效，仅作临时应急用。

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