React Native：multiline={false}时如何实现TextInput换行且回车跳转下一个输入框？

核心解决方案 #

保留multiline={true}以支持文本自动换行，同时通过onKeyPress拦截回车事件，阻止默认换行行为并直接触发跳转逻辑：

<TextInput
  ref={inputRef}
  value={text}
  style={styles.textInput}
  returnKeyType="next"
  placeholder="placeholder"
  scrollEnabled={false}
  blurOnSubmit={false}
  onFocus={onFocusInput}
  textAlignVertical="center"
  onContentSizeChange={onChangeContentSizeChange}
  onChangeText={onInputChangeValue}
  onBlur={onInputBlur}
  onKeyPress={(e) => {
    if (e.nativeEvent.key === 'Enter') {
      // 阻止回车的默认换行行为
      e.preventDefault();
      // 直接执行跳转下一个输入框的逻辑
      NextScript(id);
    } else {
      // 保留原有onKeyPress逻辑（如果有）
      onInputKeyPress(e);
    }
  }}
  onSubmitEditing={() => NextScript(id)}
  multiline={true}
  numberOfLines={5}
/>

方案说明 #

• 既满足文本超出一行时自动换行的需求，又让回车直接触发跳转，不会插入换行符，避免UI异常。
• 无需设置blurOnSubmit={true}，键盘会保持激活状态，直接切换到下一个输入框。

进阶优化（可选） #

如果需要允许用户通过Shift+Enter手动换行，可修改onKeyPress的判断逻辑：

onKeyPress={(e) => {
  // 仅当单独按Enter时触发跳转，Shift+Enter则保留换行
  if (e.nativeEvent.key === 'Enter' && !e.nativeEvent.shiftKey) {
    e.preventDefault();
    NextScript(id);
  } else {
    onInputKeyPress(e);
  }
}}

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