如果输入值较大，TextInput 会变为空白

Question

我正在开发一个简单的 React Native 应用程序来保存笔记。我有一个TextInput 组件，它显示预填充的值，如果有的话，你可以更改输入值。我有一个控制输入字段的状态，并且只附加了onChangeText 事件。这是我的Note 组件：

const NotePage = ({ note, handleGoBack }) => {
  const [noteText, setNoteText] = useState(note ? note.description : '');

  return (
      <ScrollView style={styles.container}>
        <TextInput
          style={styles.inputStyle}
          value={noteText}
          multiline
          autoFocus={note === null}
          onChangeText={(text) => setNoteText(text)}
          textBreakStrategy="simple"
          placeholder="New Note"
        />
      </ScrollView>
  );
};

但是，如果我有一个大文本作为TextInput 的值，则该值变为空白，而不是没有值，似乎文本变得透明或什么。而且，当我按下键盘上的删除按钮时，删除一些字符后，它再次可见！真的很奇怪。

任何帮助将不胜感激！先谢谢了！？？？？

Answer 1

看起来是 ScrollView 错误 (https://github.com/facebook/react-native/issues/22713)。

一种解决方法是设置maxLength 属性，这样您就不能输入超过一定数量的字符，ScrollView 消失之前的最大数量：

// ...
<ScrollView>
  <TextInput
    value={noteText}
    multiline
    autoFocus={note === null}
    onChangeText={(text) => setNoteText(text)}
    textBreakStrategy="simple"
    placeholder="New Note"
    maxLength={1778}
  />
</ScrollView>

在它消失之前您可以输入的字符数量可能会有所不同，因此请尝试使用该值。

您还可以根据最大字符数将editable 设置为false：

editable={noteText.length <= 1778}

但是，如果您仅将 TextInput 渲染为多行 TextInput 本身可滚动，则将 ScrollView 替换为常规 View 可能会更好。