react-native - 如何获得当前关注的输入的位置？

Question

我需要知道当前关注的输入的位置以进行一些计算。最后，我想在上面调用.measure()。

我得到了:

import { TextInput } from 'react-native';

const { State: TextInputState } = TextInput;
var currentlyFocussedField      = TextInputState.currentlyFocusedField();

console.log('currentlyFocussedField', currentlyFocussedField);

但这只会返回文本字段的ID(例如 394，下一个字段是 395)。如何访问真实的元素/对象或如何在屏幕上获取其位置？

Answer 1

我不知道如何从javascript中的数字reactTag访问React组件，但是您可以使用RN内部使用的相同UIManager.measure(reactTag, callback)函数来使.measure()工作。

它没有记录，但是您可以找到iOS的源here和Android的源here。

您可以使用它来获取 native View 的所有大小值。例如，从上面的示例中绘制:

import { UIManager, TextInput } from 'react-native';

const { State: TextInputState } = TextInput;
const currentlyFocusedField = TextInputState.currentlyFocusedField();

UIManager.measure(currentlyFocusedField, (originX, originY, width, height, pageX, pageY) => {
  console.log(originX, originY, width, height, pageX, pageY);
});