react native：如何监听组件位置？答案

【问题标题】：react native: How to listen to component position?react native：如何监听组件位置？
【发布时间】：2016-11-09 15:57:38
【问题描述】：

我尝试过使用不同类型的位置回调，但没有什么能满足我的需求。

onLayout 不更新
setInterval 的measure() 太重了
onPanResponderMove 阻止子手势

我想在导航器转换期间检索场景组件位置。

更准确地说，这里有一个示例：https://rnplay.org/apps/53SXZg。如何找回拖拽的场景位置？

【问题讨论】：

如果你使用Animated，你不能在值改变时添加一个事件监听器吗？ facebook.github.io/react-native/docs/animated.html#addlistener
谢谢，我使用经典的 Navigator.SceneConfigs 和自定义手势来拖动/滑动场景。我需要检索拖动的场景位置。我发现的唯一方法是测量（）它并在父组件上回调。使用 setInterval 并且它过于消耗和肮脏。我不知道如何添加侦听器（使用 Animated 但在哪里？）。这篇文章 (stackoverflow.com/questions/37350129/…) 谈到了 NavigatorExperimental 上的进度道具，但我理解它的速度很慢，并且不确定它是否会回调位置...

标签： ios reactjs react-native

【解决方案1】：

使用NavigationTransitionner 或NavigatorExperimental 找到它。谢谢嘲笑。监听 transitionProps.position AnimatedValue ：

_render(transitionProps: NavigationTransitionProps,): React.Element<any> {
  const scenes = transitionProps.scenes.map((scene) => {
    const sceneProps = {
      ...transitionProps,
      scene,
    };
    return this._renderScene(sceneProps);
  });

  // Add position listener
  if(!this.positionListener){
    this.positionListener = transitionProps.position.addListener(({value}) => {
    console.log('value', value);
    });
  }

  return (
    <View style={styles.navigator}>
      {scenes}
    </View>
  );
}

【讨论】：