React Native FlatList 项目会溢出容器吗？

Question

是否可以允许某个项目溢出 FlatList 组件的容器？在此示例中，FlatList 中的项目是常规 View 组件，其中有一个“弹出窗口”View 组件，我希望将其显示在 FlatList 容器的边界上。

在这里您可以看到红色框被 FlatList 容器的边界剪裁

这就是我想要实现的目标（红色框（绝对定位）溢出了 FlatList 组件的边界）

我的代码

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" }}
/>