使用 Lottie 的 React Native Flatlist 自定义刷新控件出现故障

问题描述

我正在尝试为我的应用程序实现自定义复习动画，我快要完成了。似乎我无法修复此故障，但我知道这是可能的，因为本机 RefreshControl 非常流畅。这是我目前拥有的视频：https://youtu.be/4lMn2sVXBAM

在此视频中，您可以看到它如何在您释放平面列表后滚动经过它应该停止的位置，然后又跳回到它应该停止的位置。我只是希望它是平滑的，不要超过必要的停止，所以它看起来不会有问题。这是我的代码：

@inject('store')
@observer
class VolesFeedScreen extends Component<HomeFeed> {

  @observable voleData:any = [];
  @observable newVoleData:any = [1]; // needs to have length in the beginning
  @observable error:any = null;
  @observable lastVoleTimestamp: any = null;
  @observable loadingMoreRefreshing: boolean = false;
  @observable refreshing:boolean = true;
  @observable lottieViewRef: any = React.createRef();
  @observable flatListRef: any = React.createRef();
  @observable offsetY: number = 0;
  @observable animationSpeed: any = 0;
  @observable extraPaddingTop: any = 0;

  async componentDidMount(){
    this.animationSpeed = 1;
    this.lottieViewRef.current.play();
    this.voleData = await getVoles();
    if(this.voleData.length > 0){
      this.lastVoleTimestamp = this.voleData[this.voleData.length - 1].createdAt;
    }
    this.animationSpeed = 0;
    this.lottieViewRef.current.reset();
    this.refreshing = false;
  }

  _renderItem = ({item}:any) => (
    <VoleCard
      voleId={item.voleId}
      profileImageURL={item.userImageUrl}
      userHandle={item.userHandle}
      userId={item.userId}
      VoteCountDictionary={item.votingOptionsDictionary}
      userVoteOption={item.userVoteOption}
      shareStat={item.shareCount}
      description={item.voleDescription}
      imageUrl={item.imageUrl.length > 0 ? item.imageUrl[0] : null} //only one image for Now
      videoUrl={item.videoUrl.length > 0 ? item.videoUrl[0] : null} //only one video for Now
      time={convertTime(item.createdAt)}
      key={JSON.stringify(item)}
    />
 );

  onScroll(event:any) {
    const { nativeEvent } = event;
    const { contentOffset } = nativeEvent;
    const { y } = contentOffset;
    this.offsetY = y;
    if(y < -45){
      this.animationSpeed = 1;
      this.lottieViewRef.current.play();
    }
  }

  onRelease = async () => {
    if (this.offsetY <= -45 && !this.refreshing) {
      this.flatListRef.current.scrollToOffset({ animated: false,offset: -40 });
      hapticFeedback();
      this.extraPaddingTop = 40;
      this.newVoleData = [1];
      this.refreshing = true;
      this.animationSpeed = 1;
      this.lottieViewRef.current.play();
      this.voleData = await getVoles();
      this.extraPaddingTop = 0;
      this.animationSpeed = 0;
      this.lottieViewRef.current.reset();
      if(this.voleData.length > 0){
        this.lastVoleTimestamp = this.voleData[this.voleData.length - 1].createdAt;
      }
      this.refreshing = false;
    }
  }

  render() {
    return (
      <View>
        <LottieView
          style={styles.lottieView}
          ref={this.lottieViewRef}
          source={require('../../../assets/loadingDots.json')}
          speed={this.animationSpeed}
        />
        <FlatList
          contentContainerStyle={styles.mainContainer}
          data={this.voleData}
          renderItem={this._renderItem}
          onScroll={(evt) => this.onScroll(evt)}
          scrollEnabled={!this.refreshing}
          ref={this.flatListRef}
          onResponderRelease={this.onRelease}
          ListHeaderComponent={(
            <View style={{ paddingTop: this.extraPaddingTop}}/>
          )}
          ListFooterComponent={this.loadingMoreRefreshing ? <ActivityIndicator style={styles.footer}/> : this.refreshing ? null : <Text style={styles.noMoreVolesText}>No more voles</Text>}
          onEndReached={this.newVoleData.length > 0 ? this.loadMoreVoles : null}
          onEndReachedThreshold={2}
          keyExtractor={item => item.voleId}
        />
        <StatusBar barStyle={'dark-content'}/>
      </View>
    )
  }
}

const styles = StyleSheet.create({
  mainContainer:{
    marginTop: 6,marginLeft: 6,marginRight: 6,},footer:{
    marginBottom: 10,alignSelf:'center'
  },noMoreVolesText:{
    fontSize: 10,marginBottom: 10,alignSelf:'center',color:'#000000',opacity: .5,lottieView: {
    height: 50,position: 'absolute',top:0,left: 0,right: 0,});

export default VolesFeedScreen;

我认为它正在做的是，一旦放开 flatlist，它就会在 onRelease 函数启动之前反弹超过停止点，该点位于上方 -40 的偏移量处。任何帮助表示赞赏！

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）