React Native 删除 Flatlist 中的底部空间答案

【问题标题】：React Native remove bottom space in FlatlistReact Native 删除 Flatlist 中的底部空间
【发布时间】：2020-07-22 10:14:30
【问题描述】：

我不明白为什么我的 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

【问题讨论】：

尝试从父 view 移除 flex:1
你能分享一下renderCategories代码吗？

标签： reactjs react-native scrollview react-native-flatlist

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

要么从父视图中移除 flex:1，要么为所有子视图提供适当的 flex。

【讨论】：