react-native - 如何使 flatlist 增长到填满整个屏幕？

Question

使用react-native-gifted-chat。只有一条消息，Flatlist 不会占据整个屏幕，导致消息在向下滚动时看起来很奇怪（见图）。如何使列表增长以填满整个屏幕？

 <View style={styles.container}>
  <GiftedChat
    messages={this.state.messages}
    onSend={this.onSend}
    alwaysShowSend
    minInputToolbarHeight={60}
    bottomOffset={0}
    alignTop
  />
 </View>
const styles = EStyleSheet.create({
  container: {
    flex: 1,
  }
})

Answer 1

以下代码适用于我。设置属性alignTop false，使用flex: 1forSafeA确保 FlatList 占据所有屏幕。

 <SafeAreaView style={styles.container}>
    <GiftedChat
      messages={this.state.messages}
      onSend={this.onSend}
      alignTop={false}/>
  </SafeAreaView>

const styles = StyleSheet.create({
  container: {
    flex: 1,
 },
})