React Native中如何使用onSubmitEditing实现TextInput焦点自动跳转

你的需求可以通过onSubmitEditing实现，但仅添加这两个属性到Input组件上不足以直接生效，还需要完成以下调整：

1. 透传属性到Input组件内部的TextInput #

你现在自定义的Input组件没有接收和向下传递blurOnSubmit、onSubmitEditing属性，需要修改input.js的代码，把相关props透传给内部的原生TextInput：

import React from "react";
import { TextInput, View } from "react-native";

const Input = React.forwardRef(({placeholder, onKeyPress, blurOnSubmit, onSubmitEditing}, ref) => {
  return(
    <View>
      <TextInput 
        ref={ref} 
        placeholder={placeholder}
        onKeyPress={onKeyPress}
        blurOnSubmit={blurOnSubmit}
        onSubmitEditing={onSubmitEditing}
      />
    </View>
  )
})

export default Input;

2. 父组件调用时传入对应属性 #

在父组件调用firstName对应的Input时，传入你提到的两个属性即可，建议加可选链操作符?.避免ref未挂载时报错：

<Input 
  ref={firstNameRef}
  placeholder="输入名"
  blurOnSubmit={false}
  onSubmitEditing={() => lastNameRef.current?.focus()}
/>
<Input 
  ref={lastNameRef}
  placeholder="输入姓"
/>

修改完成后，在firstName输入框按下回车时就会自动跳转到lastName输入框，同时兼容Android软键盘的回车触发逻辑。

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