React Native: индикатор видео миниатюр - PullRequest
Новая
       30

React Native: индикатор видео миниатюр

0 голосов
/ 31 декабря 2018

Я использую 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
                    })}
                    />

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 и показать плавный ход видео

...