TextInput 在 ScrollView React Native 中消失

Posted 2023-04-18

【中文标题】TextInput 在 ScrollView React Native 中消失

【英文标题】：TextInput vanishes inside 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',
  ,
);

【参考方案1】：

尝试以下任一解决方法：

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

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

【讨论】：

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