在滚动一些视频后，在flatlist内部flatlist内部显示黑屏

Question

我正在开发一个带有Tiktok等全屏视频的lactlist，它可以在第一个16/17视频中效果很好，然后当我进一步滚动时，它显示了黑屏。

以下是我的flatlist：

<FlatList
  style={{
    width: width,
    height: this.state.videoHeight,
  }}
  getItemLayout={(data, index) => ({
    length: this.state.videoHeight,
    offset: this.state.videoHeight * index,
    index,
  })}
  onScrollToIndexFailed={(info) => {
    const wait = new Promise((resolve) =>
      setTimeout(resolve, 500),
    );
    wait.then(() => {
      this.flatlistRef.current?.scrollToIndex({
        index: info.index,
        animated: false,
      });
    });
  }}
  showsVerticalScrollIndicator={false}
  data={this.state.allVideos}
  ref={this.flatlistRef}
  scrollEnabled={!this.state.isMinimizePlayer}
  viewabilityConfig={this.viewabilityConfig}
  decelerationRate={0}
  removeClippedSubviews={true}
  snapToAlignment={'start'}
  snapToInterval={this.state.videoHeight}
  horizontal={false}
  onViewableItemsChanged={this.onViewableItemsChanged}
  renderItem={this.renderItem}
  keyExtractor={(item, index) => item.id}
/>

滚动滚动功能代码

renderItem = ({item, index}) => (
  <PlayerContext.Consumer>
    {({setVideo, setMetaData}) => (
      <TouchableOpacity
        onPress={() => {
          if (!this.state.isMinimizePlayer) {
            this.setState({isPause: !this.state.isPause});
          } else {
            this.maximizePlayr();
          }
        }}
        activeOpacity={0.9}
        style={{
          width: width,
          height: this.state.videoHeight,
        }}>
        <Video
          //  hideShutterView={false}
          // useTextureView={true}
          ref={(ref) => {
            this.playerRef[index] = ref;
          }}
          style={{
            backgroundColor: 'black',
            width: this.state.videoWidth,
            height: this.state.videoHeight,
          }}
          resizeMode={'cover'}
          muted={this.state.isMute}
          paused={
            index == this.state.currentVisibleIndex
              ? this.state.isPause
              : true
            // index !== this.state.currentVisibleIndex ||
            // !this.state.isPause
          }
          onLoad={(data) => {
            // console.log('===>' + index);
          }}
          controls={false}
          hideShutterView={true}
          repeat={this.state.isLoop}
          onEnd={() => {
            if (!this.state.isLoop) {
              if (this.state.isAutoPlay) {
                if (
                  this.state.currentVisibleIndex <
                  this.state.allVideos.length - 1
                ) {
                  if (this.state.setGoNext) {
                    this.setState({setGoNext: false});
                    this._goToNextPage();
                    setTimeout(() => {
                      this.setState({setGoNext: true});
                    }, 1000);
                  }
                } else {
                  setVideo(null);
                }
              }
            }
          }}
          onProgress={(progress) => {
            if (this.state.currentTrackDuration == 0) {
              this.setState({
                currentTrackDuration: progress.seekableDuration,
              });
            }
            this.setState({
              progress: progress.currentTime / progress.seekableDuration,
            });
          }}
          bufferConfig={{
            minBufferMs: 15000,
            maxBufferMs: 50000,
            bufferForPlaybackMs: 1500,
            bufferForPlaybackAfterRebufferMs: 1500,
          }}
          source={{uri: item.url}}
          poster={item.url}
          onError={(e) => console.log('video load failed!' + index, e)}
          onVideoError={(e) =>
            console.log('video error load failed!' + index, e)
          }
          onReadyForDisplay={() => {}}
          posterResizeMode={'cover'}></Video>
        {this.state.isMinimizePlayer && (
          <View
            style={{
              backgroundColor: this.ThemedColors.happy,
              position: 'absolute',
              width: this.state.videoWidth,
              justifyContent: 'center',
              alignItems: 'center',
              height: this.state.videoHeight,
            }}>
            <TouchableOpacity
              onPress={() => {
                this.setState({isPause: !this.state.isPause});
              }}>
              <IconM
                name={!this.state.isPause ? 'play-arrow' : 'pause'}
                size={28}
                color={'white'}
              />
            </TouchableOpacity>
          </View>
        )}
        {this.state.isMinimizePlayer && (
          <View
            style={{
              flexDirection: 'row',
              flex: 1,
              height: this.state.videoHeight,
              justifyContent: 'space-between',
              alignItems: 'center',
              top: 0,
              bottom: 0,
              left: 110,
              position: 'absolute',
              right: 10,
            }}>
            <View
              style={{
                flex: 1,
                paddingHorizontal: 10,
                justifyContent: 'center',
              }}>
              <Text style={{}} numberOfLines={1}>
                {item.name}
              </Text>
              <View
                style={{
                  marginTop: 5,
                  flexDirection: 'row',
                  paddingLeft: 0,
                  alignItems: 'center',
                }}>
                <Image
                  source={require('../../../assets/Images/icon_eye.png')}
                  style={{
                    height: 10,
                    width: 16,
                    tintColor: 'black',
                    resizeMode: 'contain',
                  }}
                />
                <Text style={{marginLeft: 2}}>{this.metaData.from}</Text>
              </View>
            </View>

            <TouchableOpacity
              onPress={() => {
                setVideo(null);
              }}
              style={{
                height: 50,
                width: 50,
                alignItems: 'center',
                justifyContent: 'center',
              }}>
              <Icon name="close" size={20} color={'black'} />
            </TouchableOpacity>
          </View>
        )}

        {!this.state.isMinimizePlayer && (
          <LinearGradient
            colors={['#000000', '#80000000']}
            style={{
              position: 'absolute',
              top: 0,
              paddingTop: Platform.OS == 'ios' ? width * 0.1 : width * 0.04,
              left: 0,
              right: 0,
            }}>
            <Text style={this.ThemedStyles.videoTitleText} numberOfLines={1}>
              {item.name}
            </Text>
            <View style={this.ThemedStyles.videoMomentContaine}>
              <Text style={this.ThemedStyles.videoDateText}>
                {moment.unix(item.createdAt / 1000).format('MMMM DD, YYYY')}
              </Text>
              <Text
                style={[
                  this.ThemedStyles.videoMomentText,
                  {backgroundColor: this.ThemedColors[item.moment]},
                ]}>
                {item.moment}
              </Text>
            </View>
            <View style={this.ThemedStyles.videoMomentTagContaine}>
              {item?.tagN?.map((data) => {
                return (
                  <View>
                    <Text style={this.ThemedStyles.videoDateText}>
                      #{data}
                    </Text>
                  </View>
                );
              })}
            </View>
          </LinearGradient>
        )}
      </TouchableOpacity>
    )}
  </PlayerContext.Consumer>
);

的代码：滚动功能代码可行并播放前16个视频的视频，然后显示下一个视频的黑屏，而不是播放它们。滚动回到以前的视频时，他们仍在播放，但是16日之后的视频是黑色的。