萌新求问 React Native 如何实现类似抖音等短视频首页的上下滑动 和滑动到当前屏幕的视频播放(js也行)



  • 萌新求问 React Native 如何实现类似抖音等短视频首页的上下滑动 和滑动到当前屏幕的视频播放(js也行)



  • 为了回答你我专门下了一个抖音,下次提问可以多说两句,描述的具体一点,这样更好回答,也防止答非所问。
    先说滑动的问题,首先这个和视频没关系,你可以自己实现一个图片的效果,每次上滑下滑变化图片。参考ScrollView的pagingEnabled属性,可以先做一个左右滑的,上下没试过,但是可以仿照自己利用onMomentumScrollEnd 和scrollTo 自己实现一个。
    上面的实现了就好说了,react-native-video这个组件实现视频播放
    至于滑动到这个视频才播放,那就是上面的图片变化组件,增加一个事件,滑动到那个了,调用一下手动播放,离开的停止播放就好了



  • 首先非常感谢您的用心 我听从您的建议 做出了上下滑动 使用的是Flatlist 现在问题就是无法让当前屏幕的视频播放 因为有多个子组件video所以不知道该怎么控制





  • 还是一样的,先实现这样一个功能,增加一个页码的变量pagination,每次滑动一页,页码+1或者—1,且翻页完成后出发事件,比如show(pagination)。同理,每个视频要能够通过页码对应上,这样翻到哪个视频就能播放哪个了。
    另外说一句,这种无限滑动的不建议一次加载太多,比如FlatList里最多3个,每次翻页都重置数据,3个是保证上下滑动能提前准备预览,比如准备5个也是可以的,这样通过每次动作,控制当前是谁播放,这样还是挺简单的。



  • 谢谢小哥哥 我现在把那个写好了 努力写点赞效果



  • @whyming
    老哥 我还有问题 关于抖音快速点赞飘散爱心那个 怎么能让很多心同时执行动画互不干扰呢 每次点击界面都会增加一个爱心



  • 每次点击怎么在界面上创建一个心呢



  • 分成两个部分,首先做一个单次点击事件,点击之后随便弹个alert都行,然后再做一个爱心显示到消失的动画,最后通过点击调用这个爱心显示动画。
    爱心显示到消失是在最上层的,逻辑上和一般的toast组件或是confirm组件一样,独立于视频那个组件,换句话说,把爱心显示做成一个完全独立的组件,然后通过点击事件关联起来。这个特殊一点的地方在于需要同时支持显示多个爱心,就是多个图层。
     这里有两个选择,做一个app级别的图层,在这个图层里显示爱心,参考这个项目 https://github.com/magicismight/react-native-root-toast 里面用了一个react-native-root-siblings,可以实现app级别的图层。
    另外一个就是做这个组件级别的,大致代码这样
    class DouyinComponent extends PureComponent {
    render(){
    <View>
    // video component
    <View style={{position:"absolute"}}>
    hearts.map(h => (
    <Image source={HeartPng} style={{position:"absolute"}} onHide={hideHeart}/>
    ))
    </View>
    </View>
    }
    }
    大致就是这个意思,Image可以替换为自己的组件,里面做动画,hearts是每次点击插入一个数据,动画组件需要在逐渐透明后消失,调用hideHeart更新hearts就好了。



  • @gaokaikai萌新求问 React Native 如何实现类似抖音等短视频首页的上下滑动 和滑动到当前屏幕的视频播放(js也行) 中说:

    当前屏幕的视频播放

    麻烦问一下 那个当前屏幕的视频播放 的功能 怎么才能判断 滑动到那一页了? 我想了半天 都没有想到。。。