美文网首页reactReact Native开发React Native开发经验集
react native 关于FlatList滚动事件的坑

react native 关于FlatList滚动事件的坑

作者: giants_one | 来源:发表于2018-01-24 17:22 被阅读1231次

    最近想实现一个这样的需求,用户将FlatList向上滑动是隐藏顶部导航栏,向下滑动的时候显示顶部导航栏。
    我的实现逻辑:首先要实现这个功能,需要知道用户的手势是向上滚动还是向下滚动,拿到实时的坐标信息,那么如何才能得到坐标信息呢?首先想到的就是去查官方的API,然后发现FlatList的文档中没有onScroll事件监听,有点小懵逼。然后想ScrollViewFlatList是父子关系,去看看ScrollView的API说明吧,果然在ScrollView中发现了onScroll的事件监听,文档介绍如下。

    image.png
    看完后发现并没有关于回调函数的参数介绍,然后试着在回调函数中加了一个event的参数,打印试试看。
    image.png
    image.png
    image.png
    看到打印的信息有是一脸懵逼了,不是我要的信息啊。
    然后怎么办了,去翻翻react nativeIssues吧,然后一顿猛搜,找到了一点线索,还有这种操作?(我感觉颠覆了我的程序观 ? )
    z
    拿到这个信息就好实现我的功能了。
    以上就是我使用FlatList中遇到的这个坑,希望能为在react native坑之路上的小伙伴们填一个坑,毕竟还有很多坑等着我们去填,保持乐观的态度最重要 ? 。

    相关文章

      网友评论

      • Nur__:我想要滑动一次只有变一个item(比如抖音一样)。。。有没有解决的
        Nur__:@giants_one 解决了,谢谢
        giants_one:https://github.com/alexbrillant/react-native-deck-swiper 试试
      • a0eb5bd0011c:我试了下怎么不行哈,有么有demo?
        giants_one:@可_69ac 就这么两行代码啊

      本文标题:react native 关于FlatList滚动事件的坑

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