reactjs - React Native 显示不正确的元素度量

Question

我只想得到这个元素的测量值，不真实。

元素

<View style={styles.top}>
    <Animated.View
        style={[styles.textWrapper]}>
        <Text
            onLayout={(event) => {
                this.layout = event.nativeEvent.layout;
            }}
            style={[styles.text]}>Hola</Text>
    </Animated.View>
</View>

样式:

top: {
    flex: 1,
    alignItems: "center",
    justifyContent: "center",
},
textWrapper: {
    justifyContent: "center",
},
text: {
    position: 'absolute',
    fontSize: 60
}

然后我在 componentDidMount

中记录元素的度量

componentDidMount(){
    setTimeout(()=>{
    const {x, y, height, width} = this.layout;
    console.log('x, y, height, width', x, y, height, width);


    })

///0 , -35.23232323 , 75.3434234234 ,32.22323434

Here's the snack

尽管从视觉上看，该元素位于屏幕中央的某个位置，但您可以看到数字完全错误。

当我可以在屏幕上看到元素时，y 怎么可能是负数呢？

Answer 1

为您的Text元素，你使用了 position: "absolute" style Prop ，但没有提供 left或 top或 bottom或 right支柱。 如果添加 left:0, top:0给你的风格 Prop Text元素，然后是 x 的结果和 y将是 0而不是负数:

text: {
    position: 'absolute',
    fontSize: 60,
    left: 0,
    top: 0,
}

最后一个问题:

How can y even be negative when I can see the element is on the screen?

我们可以看到它只是因为没有其他不透明元素覆盖该元素。