react-native - React 本机平面列表中的最后一项超出了屏幕范围

Question

我在外部容器上有一个包含一些样式的平面列表，如下所示。

<View style={containerStyle}>
 // more jsx components come here
  <View style={resultContainerStyle}>
    <FlatList
      data={results}
      keyExtractor={(item) => (item.id && item.id.toString())}
      renderItem={({ item, index }) => (
        <ListItem
          item={item}
          selectItem={selectItem}
        />
      )}
    />
  </View>
</View>

问题是列表的最后一个值超出了屏幕的视图，除非在父容器上放置固定高度，否则无法查看它。是否可以在没有固定高度的情况下做到这一点。

Answer 1

ASafeAreaView可用于将视图限制在屏幕的“安全”区域（避免凹口和弯曲底部。查看以下示例

<SafeAreaView style={containerStyle}>
 // more jsx components come here
  <View style={resultContainerStyle}>
    <FlatList
      data={results}
      keyExtractor={(item) => (item.id && item.id.toString())}
      renderItem={({ item, index }) => (
        <ListItem
          item={item}
          selectItem={selectItem}
        />
      )}
    />
  </View>
</SafeAreaView>

更多示例可以在react native 文档中找到。