RN中怎么获取组件在屏幕的实时位置? 求知晓的大神帮助



  • 当当网首页,有个根据滚动调整搜索头部的样式 让人十分舒服。。

    本人解决方案一: 放一个ScrollView 然后 绑定 onScroll事件,根据触发频率scrollEventThrottle()这个不行!
    方案二 在onScroll获取ScrollView滚动到位置 把值存在 state中,然后根据state中的值,判断执行动画。。 现在就说 没有办法从scrollView 提供的api中没有办法获取组件的位置,求大神帮忙。。
    根据组件的具体位置,执行函数,这个是提升体验的最佳方案,下载了 fb的 f8App就有这样的效果,但是他们提供的源码,没有找到方法:https://github.com/fbsamples/f8app



  • 组件

    <view onLayout={event=>{this.layoutY = event.nativeEvent.layout.y}}>
    

    listView/scrollView

    this.refListview.getScrollResponder().scrollResponderScrollTo({
                    x: 0,
                    y:refView.layoutY,
                    animated: true
                })
    


  • 谢谢,您的代码 。getScrollResponder这个方法和scrollResponderScrollTo都是文档里没有的,但是看意思明白什么意思和大致用法,您的 this.refListview 是给一个listView 指定 ref属性吗? 写法不应该 是 this.refs.refListview 吗,感觉RN开发 没有师傅带 坑太多了,
    再次谢谢大神帮忙 谢谢,下午测试下您说的办法 再做答谢



  • @千夫指 ref 没错,需要给listViewe的每row添加ref引用
    ref你可以这样写:

    ref={ref=>{this.listView=ref}}
    

登录后回复