React Native integrated react-native-pdf (PDF automatically rotate)

• Plug-in installation

官方链接:https://github.com/wonday/react-native-pdf

#安装
npm install rn-fetch-blob --save
npm install react-native-pdf --save

#链接依赖
react-native link rn-fetch-blob
react-native link react-native-pdf

• Sample Code
• App Set to start drawing a link: https://blog.csdn.net/weixin_44187730/article/details/88027825

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

import Pdf from 'react-native-pdf';
import SplashScreen from 'react-native-splash-screen'

export default class App extends React.Component {

    constructor(props) {
        super(props);

        this.state = {
            totalPage: 1,//pdf总页数
            currentPage: 1//当前页
        };

    }

    //生命周期函数、render之后开始回调
    async componentDidMount() {
        //隐藏图片显示
        await SplashScreen.hide();

        //定时回调翻页
        this.timer = setInterval(() => {
            let {currentPage, totalPage} = this.state;
            currentPage++;
            if (currentPage > totalPage) {
                currentPage = 1;
            }
            console.log('页数开始增加', currentPage);
            this.setState({currentPage});
        }, 3000);
    }

    //生命周期函数
    componentWillUnmount() {
        this.timer && clearInterval(this.timer);
    }

    render() {

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

        const {currentPage} = this.state;

        return (
            <View style={styles.container}>
                <Pdf
                    source={source}
                    horizontal={true}
                    page={currentPage}
                    enableRTL={true}
                    onLoadComplete={totalPage => {
                        //加载完成设置pdf总页数
                        this.setState({totalPage});
                    }}
                    onPageChanged={(page, numberOfPages) => {
                        console.log(`当前页:${page},总页数:${numberOfPages}`);
                    }}
                    onError={(error) => {
                        console.log(error);
                    }}
                    style={styles.pdf}/>
            </View>
        );
    }
}

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

• Renderings