React Native中@gorhom/react-native-bottom-sheet无障碍焦点问题求助

这个库本身支持无障碍功能，不需要更换，以下是针对焦点被困问题的具体解决方案：

核心修复步骤 #

1. 配置弹窗的无障碍容器属性
   给BottomSheetModal设置正确的无障碍角色和属性，让系统识别这是一个弹窗容器，自动限制焦点范围：

   • 添加accessible={true}
   • 设置accessibilityRole="dialog"
   • 补充accessibilityLabel（用于屏幕阅读器识别弹窗用途）

2. 主动管理弹窗打开后的焦点
   在弹窗完全打开时，手动将焦点移到弹窗内第一个可交互元素，避免焦点卡在滑块或主内容区域：

   • 利用onChange回调监听弹窗状态，当弹窗切换到完全打开的索引（通常是0，根据你的配置调整）时，调用AccessibilityInfo.setFocus()将焦点指向目标元素

3. 确保子元素的无障碍属性正确
   弹窗内的交互元素（如TextInput、Button）需要明确设置：

   • accessible={true}
   • 对应accessibilityRole（比如文本框用textbox，按钮用button）
   • 不要在父级View上设置不必要的accessible属性，避免拦截子元素焦点

修改后的代码示例 #

import { AccessibilityInfo } from 'react-native';

const firstInputRef = useRef(null);

const handleSheetChanges = (index) => {
  // 假设index=0是弹窗完全打开的状态，根据你的实际配置调整
  if (index === 0) {
    // 延迟执行确保弹窗渲染完成
    setTimeout(() => {
      firstInputRef.current && AccessibilityInfo.setFocus(firstInputRef.current);
    }, 300);
  }
};

<BottomSheetModal
  enableDynamicSizing={true}
  ref={bottomSheetRef}
  onChange={handleSheetChanges}
  topInset={top}
  enableHandlePanningGesture={true}
  enablePanDownToClose={true}
  backdropComponent={Backdrop}
  backgroundStyle={styles.background}
  keyboardBehavior={Platform.OS === 'ios' ? 'interactive' : 'fillParent'}
  keyboardBlurBehavior="restore"
  android_keyboardInputMode="adjustResize"
  // 新增无障碍属性
  accessible={true}
  accessibilityRole="dialog"
  accessibilityLabel="操作弹窗"
  {...bottomSheetProps}
>
  <BottomSheetView>
    <View style={{ ...styles.container, paddingBottom: bottom }}>
      {/* 第一个可交互元素绑定ref，用于主动设置焦点 */}
      <TextInput 
        ref={firstInputRef} 
        accessible={true} 
        accessibilityRole="textbox" 
        placeholder="请输入内容"
      />
      {children}
    </View>
  </BottomSheetView>
</BottomSheetModal>

额外说明 #

• 如果你已经更新到库的最新稳定版，上述配置应该可以解决焦点问题；部分旧版本可能存在无障碍相关的bug，确保使用v4.6.4及以上版本
• iOS和安卓的无障碍焦点处理逻辑略有差异，上述方案兼容双平台
• 如果仍有问题，可以检查backdropComponent是否设置了干扰焦点的属性，避免遮罩层拦截焦点

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