我如何找到功能性反应天然组分中的组分位置

Question

我正在尝试在渲染后动态查找组件的位置。我试图使用useRef和getBoundingClientRect（）（请参见下面的代码）。

我得到的答复是这个。

myRef.current.getBoundingClientRect不是函数。 （在“ myRef.current.getBoundingClientRect（）”中，“ myRef.current.getBoundingClientRect”未定义。）>

任何想法我做错了什么？

import React, { useState, useRef } from "react";
import { View, Button, TextInput } from "react-native";

const MyComponent = () => {
  const [value, onChangeText] = useState("Useless Placeholder");

  const myRef = useRef();

  const showRefPosition = () => {
    console.log("button clicked, set focus and log position");
    // this works and shows that i am using the ref correctly
    myRef.current.focus();

    // however, this does not work and throws the eror
    let componentPosition = myRef.current.getBoundingClientRect();
    console.log(`Component Position ${componentPosition}`);
  };

  return (
    <View>
      <TextInput
        style={{ height: 40, borderColor: "gray", borderWidth: 1 }}
        onChangeText={text => onChangeText(text)}
        value={value}
        ref={myRef}
      />
      <Button title="Click Me" onPress={() => showRefPosition()} />
    </View>
  );
};

export default MyComponent;

我正在尝试在渲染后动态查找组件的位置。我试图使用useRef和getBoundingClientRect（）（请参见下面的代码）。我得到的答复是这个。 myRef ....

Answer 1

您可以在react-native中尝试measure