时间戳

首页 > 解决方案 > 最后一个奇怪的平面列表项目沿着屏幕延伸

react-native - 最后一个奇怪的平面列表项目沿着屏幕延伸

问题描述

我在两列中显示了一些带有 Flatlist 的数据项。但是当最后一个地方有一个奇怪的项目时，它会沿着屏幕延伸。我不希望这样，我怎样才能让它像偶数项一样只占用 %50 的屏幕空间？非常感谢。

CategoryGridTile 组件：

return (
    <View style={styles.PlaceItem}>
      <TouchableCmp onPress={props.onSelect}>
        <View>
          <View style={{ ...styles.placeRow, ...styles.placeHeader }}>
            <ImageBackground
              source={{ uri: props.image }}
              style={styles.bgImage}
            >
              <View style={styles.titleContainer}>
                <Text style={styles.title} numberOfLines={2}>
                  {props.title}
                </Text>
              </View>
            </ImageBackground>
          </View>
        </View>
      </TouchableCmp>
    </View>
  )
}

const styles = StyleSheet.create({
  PlaceItem: {
    flex: 1,
    height: 125,
    width: '80%',
    backgroundColor: '#f5f5f5',
    borderRadius: 5,
    overflow: 'hidden',
    margin: 6
  },
  placeRow: {
    flexDirection: 'row'
  }
})

屏幕：

const renderGridItem = itemData => {
    return (
      <CategoryGridTile
        image={itemData.item.image}
        title={itemData.item.title}
        onSelect={() => {
          props.navigation.navigate({
            routeName: 'CategoryPlaces',
            params: {
              categoryId: itemData.item.title,
              locationId: locations
            }
          })
        }}
      />
    )
  }

  return (
    <FlatList
      keyExtractor={(item, index) => item._id}
      data={displayedCategories}
      renderItem={renderGridItem}
      numColumns={2}
    />
  )

标签： react-native

解决方案

在 CategoryGridTile 组件中将 PlaceItem flex: 1 更改为 flex: 1/2 解决了这个问题。

推荐阅读