Question

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

我得到的答复是这个。

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

有什么想法我做错了吗？

    import time
    from pynput.keyboard import Key, Controller   
    keyboard = Controller()
    # Press and release space
    keyboard.press(Key.space)
    keyboard.release(Key.space)

Answer 1

您可以在react-native中尝试 measure 方法。

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
    this.ref.measure( (width, height) => {
      console.log('Component width is: ' + width)
      console.log('Component height is: ' + height)
    })
  };

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

export default MyComponent;

如何在功能性本机组件中找到组件位置

1 个答案: