相关疑难解决方法(0)

我正在尝试在 react-native 应用程序中显示 pdf 文件。

这是我的代码：从 api 获取 blob：

Blob {
  "_data": Object {
    "blobId": "85225e45-7f45-463b-bd62-a9170551a3b7",
    "lastModified": undefined,
    "offset": 0,
    "size": 3028,
    "type": "application/pdf",
  },
}

注意：转换为 base64Data 后，我可以渲染图像，但不能渲染 pdf 文件。

const fileReaderInstance = new FileReader();
fileReaderInstance.readAsDataURL(response.data);
fileReaderInstance.onload = () => {
    base64data = fileReaderInstance.result;
     dispatch({
            type: OPEN_DOCUMENT, url: base64data 
        });
}

并在渲染中

<WebView 
   source={{ uri: url }} 
   originWhitelist={['*']}
 />

（适用于图像）

<Image source={{uri: url}} style={{ height: 400, width: 300, }} />

我一直在尝试使用 react native 打开一个 pdf 文件，但是我尝试的每个库都会产生一个错误。我试过下面的代码：

import React, { Component } from 'react';
import Pdf from 'react-native-pdf';

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

    return (
      <View style={styles.container}>
        <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);
                    }}
                    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,
        height:Dimensions.get('window').height,
    }
});

export default OpenBGReport;

但是，安装 react-native-pdf …