react-native - React Native，在平面列表中呈现时视图被切断

Question

所以，我目前正在开发 react native 项目，我试图添加一个工具提示组件，一旦用户点击 Flatlist 中的项目。它将触发具有多个选项的此工具提示。现在的问题是，即使我将“位置”设置为“绝对”，x,y 位置也被切断了。

无论如何我可以克服这个问题吗？我也尝试了 zIndex，但仍然没有成功。

这是我实现的工具提示组件。

export function Tooltip({
    children,
    x,
    y,
    height,
    width,
    isVisible = false,
    component,
}: TooltipProps) {

const [myWidth, setW] = useState(0)
const [myHeight, setH] = useState(0)

function onLayout({
    nativeEvent: {
        layout: {width, height},
    },
    }: LayoutChangeEvent) {
    setW(width)
    setH(height)
}

return (
    <View>
    {children}
    {isVisible && (
    <View
        onLayout={onLayout}
        style={{
        elevation: 5,
        borderWidth: 1,
        backgroundColor: 'white',
        position: 'absolute',
    top: (height - componentHeight * 2) / 2 + y,
    left: (width - componentWidth) / 2 + x,
    }}>
        {component}
    </View>
    )}
    </View>
    )
}

这是应用程序中的图像，（我需要模糊那里的项目，不便之处请见谅）

标签： react-native

Answer 1

制作父视图的 Tty 是 SafeAreaView。 return(<SafeAreaView><YourComponent/></SafeAreaView>)

可能会有所帮助。