автоматизированная c прокрутка в коде для PDF с использованием React Native и Reaction-native-pdf - PullRequest
Новая
       9

автоматизированная c прокрутка в коде для PDF с использованием React Native и Reaction-native-pdf

0 голосов
/ 26 марта 2020

Я немного новичок в программировании React Native и работаю над реализацией функции автопрокрутки для PDF-файлов. Например, в некоторых случаях я хочу автоматически прокрутить PDF вниз на x страниц, а затем прокрутить с желаемой скоростью. Я следовал этому руководству здесь здесь , которое работает только для обычных данных, но когда я использовал объект изact-native-pdf, он больше не прокручивается. Я оборачиваю объект PDF внутри ScrollView и могу подтвердить, что вызывается код прокрутки. Может кто-нибудь предложить решение или объяснить, почему это не работает с PDF? Большое спасибо!

Я также приложил свой код ниже, если это поможет. В настоящее время PDF-файл отображается, но не имеет автоматической прокрутки. 

import React from 'react';
import {StyleSheet, Dimensions, View, ScrollView} from 'react-native';

import Pdf from 'react-native-pdf';

export default class PDFScroll extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            currentPosition: 0,
        };
        this.scrolling = this.scrolling.bind(this);
    }

    componentDidMount(){
        this.activeInterval = setInterval(this.scrolling, 100);
    }

    componentWillUnmount(){
        clearInterval(this.activeInterval);
    }

    scrolling() {
        position = this.state.currentPosition + 50;
        this.pdf.scrollTo({ x: position, animated: true });
        // After position passes this value, snaps back to beginning
        let maxOffset = 2000;
        // Set animation to repeat at end of scroll
        if (this.state.currentPosition > maxOffset) {
             this.pdf.scrollTo({ x: 0, animated: false })
             this.setState({ currentPosition: 0 });
        }
        else {
            this.setState({ currentPosition: position });
        }

    }

    render() {
        const source = {
            uri: 'http://samples.leanpub.com/thereactnativebook-sample.pdf',
            cache: true,
        };

        return (
            <View style={styles.container}>
            <ScrollView
                style={styles.scrollview}
                horizontal={false}
                bounces={true}
                ref={(ref) => this.pdf = ref}
            >
                {
                    <Pdf
                        source={source}
                        onLoadComplete={(numberOfPages, filePath) => {
                            console.log(`number of pages: ${numberOfPages}`);
                        }}
                        onPageChanged={(page, numberOfPages) => {
                            console.log(`current page: ${page}`);
                        }}
                        onError={error => {
                            console.log(error);
                        }}
                        onPressLink={uri => {
                            console.log(`Link presse: ${uri}`);
                        }}
                        style={styles.pdf}
                    />
                }
                </ScrollView>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'flex-start',
        alignItems: 'center',
        marginTop: 25,
    },
    pdf: {
        flex: 1,
        width: Dimensions.get('window').width,
        height: Dimensions.get('window').height,
    },
});
...