React Native删除平面列表中的底部空格

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>

asa

Answer 1

我不知道为什么会发生这个问题，但临时的解决方案是用一个不同的视图包装你的FlatList，没有样式，主容器应该保持不变。

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

Answer 2

从父视图中删除flex:1，或者为所有subView提供适当的flex。