当我尝试下载 pdf 时，我在屏幕上看不到，屏幕变灰并且没有显示任何内容。我该如何解决？

Question

我正在尝试下载 PDF 并将其显示在我的屏幕上，但它不起作用，如果我只是在应用程序启动时调用 PDF（没有被可触摸的调用）它可以正常工作。

这些是我使用的代码

var articleList = [];
var currentMag = storageRef.child('issue 6 2.pdf');
var source = {uri:'https://www.orimi.com/pdf-test.pdf',cache:true};

constructor(props) {
        super(props);
        this.state = {PDF: false};

        console.log('Current Mag: ' + currentMag);

        currentMag.getDownloadURL().then(function(url) {
            var xhr = new XMLHttpRequest();
            xhr.responseType = 'blob';
            xhr.onload = function(event) {
                var blob = xhr.response;
                console.log('blob from xhr: ' + JSON.stringify(blob));
                var reader = new FileReader();
                reader.onload = function() {
                    source.uri = reader.result;
                    this.setState(previousState => (
                        {PDF: !previousState.PDF}
                    ))
                }.bind(this);
                reader.readAsDataURL(blob);
            }.bind(this);
            xhr.open('GET', url);
            xhr.send();


        }.bind(this)).catch(function(error) {
            return (
                <View style={styles.container}>
                    <Text>Error: {error}</Text>
                </View>
            );
        });
    }

<PDFReader
                    source={source}
                    onLoadComplete={(numberOfPages,filePath)=>{
                        console.log('Number of pages: ${numberOfPages}');
                    }}
                    onPageChanged={(page,numberOfPages)=>{
                        console.log('Current page: ${page}');
                    }}
                    onError={(error)=>{
                        console.log('Error in rendering article: ' + error);
                    }}
                    style={styles.pdf}/>

Answer 1

'source' 是一个对象值。模块知道对象值并且不会分离它们。请设置一个单独的值。

要求：仅支持React-Native 0.54+

source={{uri: source.uri }}

或者你可以使用 Webview

      <View style={styles.container}>
        <WebView
          bounces={false}
          scrollEnabled={false} 
          source={{ uri: source.uri }} />
      </View>
...
const styles = StyleSheet.create({
  container: {
    flex: 1,
    paddingTop: Constants.statusBarHeight,
  },
});