reactjs - React Native 删除 Flatlist 中的底部空间

Question

我不明白为什么我的 FlatList 在底部包含一个空格，如下所示: that's the space

谁能帮我去掉空格？我尝试了很多方法，但都没有用。我也尝试使用 ScrollView 但同样的问题发生了。这是我的源代码:

  <View
    style={{
      flex: 1,
      backgroundColor: 'red',
      justifyContent: 'center',
      alignItems: 'center',
    }}>
    <FlatList
      data={eventCategories}
      initialNumToRender={5}
      keyExtractor={item => item.id_event_category}
      showsHorizontalScrollIndicator={false}
      horizontal
      renderItem={renderCategories}
    />
    <View>
      <Text>Halo</Text>
      <Text>Halo</Text>
      <Text>Halo</Text>
      <Text>Halo</Text>
      <Text>Halo</Text>
      <Text>Halo</Text>
      <Text>Halo</Text>
      <Text>Halo</Text>
      <Text>Halo</Text>
    </View>
    <View style={styles.button}>
      <SmallButton
        title="Urutkan"
        icon="sort-active"
        onPress={() => setVisibleSort(true)}
      />
    </View>
  </View>

作为

Answer 1

不知道为什么会出现此问题，但临时解决方案是用一个没有样式的不同 View 包装您的 FlatList，并且主容器应保持原样。

<MainContainer>
    <View>
       <FlaList/>
    </View>
</MainContainer>