分成两个部分,首先做一个单次点击事件,点击之后随便弹个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就好了。