TextInput 在 ScrollView React Native 中消失答案

【问题标题】：TextInput vanishes inside ScrollView React NativeTextInput 在 ScrollView React Native 中消失
【发布时间】：2021-08-11 17:50:19
【问题描述】：

场景：我想实现如下代码所示的场景。哪里会有：

多行 TextInput 与其他组件，屏幕将可滚动。
我不希望 TextInput 可滚动。

问题：发生的情况是，在TextInput 中写入一定数量的行后，文本消失了。我仍然可以选择文本并在键盘中获得建议。这就像文本和TextInput 变得透明。当TextInput达到手机屏幕高度后，就会出现这个问题。

这是 React-Native 的错误吗？还是我在这里做错了什么？

注意：我使用的是"expo": "~40.0.0"。此外，下面的代码只是描述情况，而不是实际代码。

return (
  <ScrollView>
    <View style={styles.block} />
    <View style={styles.block} />
    <TextInput
      value={content}
      onChangeText={setContent}
      placeholder="Start writing from here"
      multiline
    />
    <View style={styles.block} />
    <View style={styles.block} />
  </ScrollView>
);

const styles = StyleSheet.create({
  block: {
    height: 200,
    backgroundColor: 'blue',
  },
});

【问题讨论】：

标签： react-native scrollview textinput react-native-scrollview react-native-textinput

【解决方案1】：

尝试以下任一解决方法：

在 TextInput 上启用 scrollEnabled
在 TextInput 上显式设置高度（例如，通过动态测量内容）

<ScrollView scrollEnabled style={{ marginTop: 100 }}>
  <TextInput multiline placeholder="type here" scrollEnabled={true} />
</ScrollView>

【讨论】：

您可以删除多余的视图并尝试直接为 TextInput 指定高度。