React Native：视频缩略图进度栏

Question

我正在使用react-native-video在我的应用中播放视频。视频需要一个带有秒缩略图的进度条，该进度条是从api获取的。并需要根据视频的播放进行滚动（在屏幕中间显示百分之一秒的缩略图。{类似iMovie中的视频编辑页面}

当前，我正在使用FlatList列出所有缩略图。但是Flatlist并非没有滞后。例如：在一个图像中休息，然后摇晃到另一个图像。

代码

              <FlatList
                    ref={ref => (this.TflatList = ref)}
                    scrollEnabled={true} 
                    data={mainThumbNailsList}
                    extraData={this.state}
                    showsHorizontalScrollIndicator={false}
                    decelerationRate={0}
                    horizontal={true}
                    renderItem={({ item }) => (
                        <View>
                         <Text
                            style={{ width: 50, height: 50 , backgroundColor : '#987', flex :1 , justifyContent : "center", alignItems:'center',borderLeftColor: '#fff', borderLeftWidth:1}}
                        >{item.item}</Text>
                        </View>

                    )}
                    keyExtractor={(item, id) => item.id.toString()}
                    onEndReachedThreshold={0.5}
                    onEndReached={() => {
                        let length = mainThumbNailsList.length;
                        for (let i = length ; i < length+ 300 ; i++){
                            let item = {
                                id : i,
                                item : i
                            };
                            mainThumbNailsList.push(item);
                        }
                    }}
                    getItemLayout={(data, index) => ({
                      length: 50,
                      offset: 50 * index,
                      index
                    })}
                    />

react-native-video中的onProgress（）

   onVideoProgress = (data) => {
        // console.log('Video data : ', data);
        this.setSeekBarPosition(data);
    }

   setSeekBarPosition = data => {
        // console.log('seekBAr logic :' , data);
        let index = data.currentTime;
        index = Math.round(index);
        console.log('index :', index);
        if (this.TflatList) 
        this.TflatList.scrollToIndex({ index: index });

    }

如何在Flatlist的中心显示当前索引，并显示视频的平滑进度