flatlist 延伸到屏幕之外

Question

我的屏幕如下所示：

return (
    <SafeAreaView style={styles.safeAreaViewContainer}>
      <View style={styles.container}>
       ....
        <View style={styles.listContainer}>
          {data && showFlatList !== null && (
            <UsersFoundList
              data={data}
            />
          )}
        </View>
      </View>
    </SafeAreaView>
  );
};

  listContainer: {
    justifyContent: 'center',
    //marginBottom: 50,
  },

我在这里从 UserFoundList 组件调用一个 FlatList：

  return (
    <View>
      <FlatList
        data={data.user}
        horizontal={false}
        scrollEnabled
        renderItem={({ item }) => (
          <UserFoundEntry user={item} onSendRequest={onSendRequest} />
        )}
        keyExtractor={(item) => item?.id?.toString()}
        ListEmptyComponent={NoUsersFoundTextBox}
      />
    </View>
  );
};

但列表与底部的 safeAreaView 重叠。滚动时，它应该出现在 SafeAreaView 的后面/下方，而不是在它的顶部。

Answer 1

尝试在 listContainer 样式中使用flex: 1，这应该使其保持在父视图的边界内。