React-Native ScrollView 使 TextInput 消失

Posted 2023-04-18

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

【英文标题】：React-Native ScrollView makes TextInput vanish

【发布时间】：2016-01-06 18:56:46

【问题描述】：

作为 React Native 的新手，希望这是一个明显的疏忽，但我已经尝试过并没有找到解决方案。这是一个非常简单的问题：当我有几个视图和一个 TextInput 时，一切都按预期布局。当我将它们包装在 ScrollView 中时，视图仍然存在，但 TextInput 不再呈现。我一直无法弄清楚为什么。

为了测试和分享它，我在这里创建了一个 rnplay 应用：https://rnplay.org/apps/P774EQ

如您所见，包装 TextInput 的视图中的文本按预期显示，但 TextInput 不存在。如果您只是删除 ScrollView（第 18 和 39 行），则会出现 TextInput。

希望有经验的人会看到这个并在几秒钟内得到答案，因为我很确定我只是错过了一些明显的东西。提前致谢。

【参考方案1】：

1) 第 17 行：style=styles.scrollview => style=styles.scrollView，你拼错了。

2) 滚动视图使用contentContainerStyle (for more details about contentContainerStyle)

<ScrollView keyboardDismissMode='interactive' style=styles.scrollview contentContainerStyle=styles.contentContainerStyle>

这里是 contentContainerStyle：

contentContainerStyle: 
    flex: 1,

3) message 样式的flex 属性最好设置为.125，因为inputcontainer 的flex 是.75。

【讨论】：

非常感谢！我之前尝试过 contentContainerStyle 没有成功，但我不知道为什么——这确实解决了它。我仍然觉得很神秘，没有它 Text 元素仍然显示，但 TextInput 没有，我不确定为什么会这样，但这确实解决了问题。我已经更新了 rnplay 应用程序，以防将来可以帮助其他人。