美文网首页
获取组件的位置信息

获取组件的位置信息

作者: sunny635533 | 来源:发表于2022-04-15 17:32 被阅读0次

参考官网:https://reactnative.dev/docs/new-architecture-library-intro#migrating-findnodehandle--getting-a-hostcomponent

 <TouchableOpacity onPress={() => {
                        const ref = this.fileMoreBtnRef[index];
                        if (ref) {
                            ref.measure((x, y, width, height, pageX, pageY) => {
                                console.log('view.measure x = ', x);
                                console.log('view.measure y = ', y);
                                console.log('view.measure width = ', width);
                                console.log('view.measure height = ', height);
                                console.log('view.measure left = ', pageX);
                                console.log('view.measure top = ', pageY);
                            })
                        }
                    }}>
                        <Image ref={(btnRef) => this.fileMoreBtnRef.push(btnRef)} source={more_circle} imageStyle={{ marginHorizontal: 12 }} />
                    </TouchableOpacity>

注意,自定义封装的Component是没有mearsure方法的,要参考官网那样取出Ref,如下

class ParentComponent extends React.Component<Props> {
  _ref: ?React.ElementRef<typeof ChildComponent>;

  render() {
    return <ChildComponent ref={this._captureRef} onSubmit={this._onSubmit} />
  }

  _captureRef: (ref) => {
    this._ref = ref;
  }

  _onSubmit: () => {
    if (this._ref != null)
      this._ref.getViewRef().measure(() => {});
    }
  }
}

class ChildComponent extends React.Component<Props> {
  _ref: ?React.ElementRef<typeof View>;

  render() {
    return (
      <View ref={this._captureRef}>
        <SubmitButton onSubmit={props.onSubmit} />
      </View>
    );
  }

  getViewRef(): ?React.ElementRef<typeof View> {
    return this._ref;
  }

  _captureRef: (ref) => {
    this._ref = ref;
  }
}

相关文章

网友评论

      本文标题:获取组件的位置信息

      本文链接:https://www.haomeiwen.com/subject/ljjqertx.html