0

我已经完成了 react-native-pdf 来展示我的 pdf 文件的幻灯片。但是，我想将当前页面状态设置为显示在显示屏上。设置该值后，它将刷新该屏幕并自动返回第一页。

这是我的代码：

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

import Pdf from 'react-native-pdf';

function Work() {
    const [currentPage, setCurrentPage] = useState()

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

        return (
            <Pdf
                source={source}
                onLoadComplete={(numberOfPages, filePath) => {
                    console.log(`number of pages: ${numberOfPages}`);
                }}
                onPageChanged={(page, numberOfPages) => {
                    console.log(`current page: ${page}`);
                    setCurrentPage(page)  //set the cuurentPage
                }}
                onError={(error) => {
                    console.log(error);
                }}
                onPressLink={(uri) => {
                    console.log(`Link presse: ${uri}`)
                }}
                style={styles.pdf} />
        )
    }

    return (
        <View style={styles.container}>
            <ShowPdf />
            <View style={styles.pageNumber}>
                <Text>{currentPage}</Text>
            </View>
        </View>
    )
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'flex-start',
        alignItems: 'center',
        //marginTop: 25,
        //backgroundColor: 'red',
        backfaceVisibility: 'hidden'
    },
    pdf: {
        flex: 1,
        width: Dimensions.get('window').width,
        height: Dimensions.get('window').height,
    },
    pageNumber: {
        position: 'absolute',
        left: 20,
        top: 20,
        backgroundColor: 'rgba(173, 173, 173, 0.5)',
        padding: 13,
        borderRadius: 6,

    }
});

export default Work;

我的模拟器显示： 图片

无论如何我可以解决这个问题？

4

0 回答 0