react-native - 固定底部视图（可变高度）并用其他视图填充剩余高度

Question

我想建立一个聊天室。在消息的视图中是消息和消息的输入字段。输入框应该在底部并且应该使用它需要的高度。如果用户输入多行文本，输入框的高度可能会发生变化。msgs-View 应该填充其余的高度（上图）。我不想放置绝对输入，因为消息的 FlatList 应该始终在“可见”区域中。

<View style={styles.wrapper}>
 <View style={styles.msgs}>Messages (FlatList)</View>
 <View style={styles.input}>Inputbox</View>
</View>

Answer 1

不要为您的输入提供 flex 样式。

给你的包装器并列出一个flex: 1样式。Wrapper 将占用其父级中的所有空间（我假设是屏幕）。并且 list 将占用包装器中的所有空间。输入将位于底部。