React-Native ScrollView 使 TextInput 消失

Question

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

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

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

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

Answer 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。