React Native是否支持Full Keyboard Access？iOS键盘导航按钮样式问题

问题背景 #

iOS设备连接外接蓝牙键盘且开启「Full Keyboard Access」辅助功能时，想通过键盘导航到按钮时修改边框样式，但使用普通的onFocus/onBlur事件完全没触发，现有代码如下：

const [isFocused, setIsFocused] = React.useState(false);

return (
  <TouchableWithoutFeedback
    onPress={props.onPress}
    accessibilityLabel={props.accessibilityLabel}
    accessibilityRole="button"
    onFocus={() => setIsFocused(true)}
    onBlur={() => setIsFocused(false)}
  >
    <View
      style={
        isFocused
          ? styles.buttonPrimaryFocus
          : styles.buttonPrimary
      }
    >
        <Text>
          {props.label}
        </Text>
      </View>
    </View>
  </TouchableWithoutFeedback>

解决方法 #

普通的onFocus/onBlur仅对应触摸交互的焦点状态，而「Full Keyboard Access」的键盘导航属于辅助功能焦点，需要用专门的辅助功能事件监听：

• 将onFocus替换为onAccessibilityFocus
• 将onBlur替换为onAccessibilityBlur

修改后的代码示例：

const [isFocused, setIsFocused] = React.useState(false);

return (
  <TouchableWithoutFeedback
    onPress={props.onPress}
    accessibilityLabel={props.accessibilityLabel}
    accessibilityRole="button"
    onAccessibilityFocus={() => setIsFocused(true)}
    onAccessibilityBlur={() => setIsFocused(false)}
  >
    <View
      style={isFocused ? styles.buttonPrimaryFocus : styles.buttonPrimary}
    >
      <Text>{props.label}</Text>
    </View>
  </TouchableWithoutFeedback>
);

注意事项 #

• 必须确保accessibilityRole="button"设置正确，这是系统识别该组件为键盘可导航按钮的前提
• 若需要更复杂的状态控制，也可以结合accessibilityState和useEffect实现，但上述事件监听方式最为直接高效

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