React Native 按下键盘Tab键跳转到下一个输入框的实现方法

你可以通过监听按键事件捕获Tab键触发，复用你已经写好的onNext跳转逻辑即可，以下是具体实现：

实现步骤 #

1. 新增按键监听处理方法，识别Tab键触发后执行跳转，同时阻止Tab的默认行为
2. 给TextInput组件绑定onKeyPress（React Native）/onKeyDown（Web React）事件，传入对应下一个输入框的ref

完整代码示例 #

const passwordRef = useRef();
const onNext = (nextOne) => {
  nextOne?.current?.focus();
};

// 新增按键处理逻辑
const handleKeyPress = (e, nextRef) => {
  // 捕获Tab按键
  if (e.nativeEvent.key === 'Tab') {
    e.preventDefault();
    onNext(nextRef);
    // 如果需要支持Shift+Tab跳回上一个输入框，可以加以下判断
    // if (e.nativeEvent.shiftKey) {
    //   上一个输入框ref?.current?.focus();
    // }
  }
};
...
return (
 <TextInput
          value={watch("username")}
          placeholder="Input Id"
          returnKeyType="next"
          autoCapitalize="none"
          placeholderTextColor={"rgba(255, 255, 255, 0.6)"}
          onSubmitEditing={() => onNext(passwordRef)}
          // 绑定按键监听事件
          onKeyPress={(e) => handleKeyPress(e, passwordRef)}
          onChangeText={(text) => setValue("username", text)}
        />

// 密码输入框按相同逻辑处理即可
<TextInput
  ref={passwordRef}
  placeholder="Input Password"
  // 其余属性省略
/>
)

注意事项 #

• 如果你使用的是Web端的原生input组件，不需要写额外监听逻辑，直接给输入框设置合理的tabIndex属性即可默认支持Tab顺序跳转
• React Native 0.66以下版本对物理键盘按键的监听兼容性较差，如出现Tab键捕获失败的情况，建议升级React Native版本
• 外接蓝牙键盘的iOS设备需要在系统设置中开启「全键盘控制」才能触发物理按键事件，否则监听逻辑不会生效

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