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

Question

我对react native中的FlatList组件有一点小问题。FlatList中的项目具有不同的高度。下面是我所拥有的一个小示例：

example FlatL

第一个问题是所有项目都位于顶部。我想把所有的东西都放在底部。

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

下面是我的代码：

    import React from "react";
import {
    Text,
    View,
    Dimensions,
    StyleSheet,
    ListView,
    TouchableOpacity,
    Animated,
    Image,
    FlatList
} from "react-native";

import glamorous, { ThemeProvider } from "glamorous-native";

import theme from "../theme";

const { height, width } = Dimensions.get("window");

const cards = [
    {
        id: 1,
        color: "red",
        height: 400
    },
    {
        id: 2,
        color: "blue",
        height: 300
    },
    {
        id: 3,
        color: "yellow",
        height: 200
    }
];

class Test extends React.Component {
    render() {
        return (
            <View style={{ bottom: 0 }}>
                <FlatList
                    ref={elm => (this.flatList = elm)}
                    showsHorizontalScrollIndicator={false}
                    data={cards}
                    pagingEnabled={true}
                    horizontal={true}
                    keyExtractor={item => item.id}
                    renderItem={({ item }) => (
                        <View
                            style={{
                                height: item.height,
                                width: width,
                                backgroundColor: item.color
                            }}
                        />
                    )}
                />
            </View>
        );
    }
}

export default Test;

有谁有解决方案吗？

Answer 1

通过设置FlatList本身的contentContainerStyle属性，可以更改每一项的位置。但是FlatList的高度必须始终是它内部最大组件的高度。

Answer 2

我用onViewableItemsChanged prop解决了这个问题

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

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