如何在本机反应中强制 TextInput 增长而 multiline={false} ？

Question

<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={onInputKeyPress}
  onSubmitEditing={() => NextScript(id)}
  multiline={false}
  numberOfLines={5}
/>

逻辑是我想要

onSubmitEditing

带我到下一个 TextInput 字段，并且我需要文本来包装输入的多个文本。如果我启用

multiline

，一旦按下回车键，它会在进入下一个输入之前进入下一行，这就是我试图避免的。

是否可以用

onSubmitEditing

完全取代回车键？每当我按下回车键时，它都会尝试在移动到下一个

TextInput

之前输入换行符，因此它会创建一个糟糕的用户界面，其中文本在重新定位然后进入下一行之前会稍微向上移动。

如果我将

blurOnSubmit

设置为 true，它会停止，但键盘会在提交时关闭。 如果我将

multiline

设置为 false，它会停止但不会换行。

Answer 1

我创建了一个示例，

onKeyPress

将允许您在按下回车键时聚焦下一个文本字段。

import { Text, SafeAreaView, StyleSheet, TextInput } from 'react-native';

export default function App() {
  return (
    <SafeAreaView style={styles.container}>
      <TextInput
        multiline={true}
        placeholder={'PLACEHOLDER'}
        onKeyPress={(e) => {
          if (e.nativeEvent.key == 'Enter') {
            console.log('ENTER');
            //focusNextTextField();
          }
        }}
        style={{ borderColor: '#000000', borderWidth: 1 }}
      />
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignContent: 'center',
    padding: 8,
  },
});

Answer 2

我也面临同样的问题。后来我找到了解决办法。

自定义文本输入处理：您需要一个自定义逻辑来处理文本输入及其在按“Enter”键时的行为。您将以编程方式控制文本换行和导航到下一个输入字段，而不是依赖多行的默认行为。

用 onSubmitEditing 替换 Enter 键：要覆盖“Enter”键的默认行为，您可以使用 onKeyPress 事件。检测何时按下“Enter”键并以编程方式触发 onSubmitEditing 函数。

维护文本换行：由于 multiline={false} 禁用自动文本换行，因此您需要实现一种方法来根据输入的内容大小或字符数手动处理文本换行。

以下是如何实现这一点的概念示例：

import React, { useState, useRef } from 'react';
import { TextInput, StyleSheet } from 'react-native';

const CustomTextInput = () => {
  const [text, setText] = useState('');
  const nextInputRef = useRef(null);

  const onInputKeyPress = (e) => {
    if (e.nativeEvent.key === 'Enter') {
      // Replace the Enter key functionality
      // Call the function you would have in onSubmitEditing
      handleEnterKeyPress();
    }
  };

  const handleEnterKeyPress = () => {
    // Logic to navigate to next TextInput
    // Focus the next input field
    if (nextInputRef.current) {
      nextInputRef.current.focus();
    }

    // Additional logic if needed to handle text wrapping
  };

  return (
    <TextInput
      value={text}
      style={styles.textInput}
      onChangeText={setText}
      onKeyPress={onInputKeyPress}
      blurOnSubmit={false} // prevent keyboard from closing
      // other props
    />
  );
};

const styles = StyleSheet.create({
  textInput: {
    // styling for your text input
  },
});

export default CustomTextInput;