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) Line17: style={styles.scrollview} => style={styles.scrollView}, 你有一个拼写错误。

2) 对 ScrollView 使用 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。

React-Native ScrollView 让 TextInput 消失

React-Native ScrollView makes TextInput vanish

textinput

scrollview

ios

react-native