React Native FlatList 项目可以溢出容器吗？

Question

是否可以让一个item溢出FlatList组件的容器？ 在这个例子中，FlatList 中的项目是常规的 View 组件，它们内部有一个“popover”视图组件，我想在 FlatList 容器的边界上显示它。

Here you can see the red boxes are clipped by the boundaries of the FlatList container

This is what I'd like to achieve (red boxes (positioned absolute) are overflowing the boundaries of FlatList component)

我的代码

const Item = () => {
    return (
        <View // this view should be clipped and go inside the container
            style={{
                height: 55,
                width: 55,
                backgroundColor: 'lightblue',
                margin: 5,
        }}>
        <View // this view should display over FlatList boundaries
            style={{
                height: 30,
                width: 30,
                backgroundColor: 'red',
                position: 'absolute',
                left: -15,
                top: -15,
                zIndex: 40,
            }}
        />
        </View>
    );
};

const App = () => {
    return (
        <View
            style={{
                flex: 1,
            }}>
            <View
                style={{
                    backgroundColor: 'gray',
                    height: 120,
                }}
            />
            <FlatList
                style={{
                    flex: 5,
                    zIndex: 1,
                    backgroundColor: 'blue',
                }}
                data={data}
                renderItem={item => {
                    return <Item {...item} />;
                }}
                numColumns={3}
            />
        </View>
    );
};

Answer 1

您可以尝试使用overflow 样式：

<FlatList
    style={{ overflow: "visible" }}
/>