Question

反应原生中的FlatList组件有一点问题。在FlatList中是具有不同高度的项目。以下是我所拥有的一个小例子：

pop

第一个问题是所有物品都位于顶部。我想将所有项目放在底部。

第二个问题是FlatList的高度始终是最大项的高度。所以你也可以滚动到一个小项目的白色区域中的另一个项目......

这里是我的代码：

def combine(group):
    return pd.DataFrame.from_records(itertools.combinations(group.word, 2))

df.groupby('ID').apply(combine)

有没有人有解决方案？

Answer 1

您可以通过设置contentContainerStyle本身的FlatList属性来更改每个项目的位置。但FlatList的高度始终必须是其中最大组件的高度。

Answer 2

我用onViewableItemsChanged道具解决了

viewabilityConfig={{itemVisiblePercentThreshold: 50}}
onViewableItemsChanged={this.onViewableItemsChanged}


onViewableItemsChanged = ({ viewableItems }) => {
    let index = viewableItems[0].index;
    this.setState({ indexOfImages: index,  heightOfImages: SCREEN_WIDTH * (viewableItems[0].item.height / viewableItems[0].item.width) });
}

我们在其数据中具有项目的宽度和高度，因此我在屏幕上获取可见项目的宽度和高度，并进行了一些计算，我使用的是 this.state.heightOfImages 像这样的平面高度

height: this.state.heightOfImages == undefined ? SCREEN_WIDTH * (images[0].height / images[0].width) : this.state.heightOfImages

Answer 3

您只需使用<View>将每张卡的内容包装在另一个styles={{ minHeight: 200, maxHeight: 300 }}元素中，它将正常工作！

水平FlatList React Native具有不同高度的项目

3 个答案: