PDFを生成し、React Nativeを表示または電子メールで送信しようとしています

Question

私は最後の数日を反応native-html-to-pdf（https://github.com/christopherdro/react-native-html-to-pdf）、反応ネイティブメール（chirag04） -view-pdf（by cnjon）

私がまだ試してはいないparkerdanの反応ネイティブメールの別のバージョンがありますが、chrirag04のバージョンは基本的にすべてのプロジェクトを壊してしまい、アンインストールするのに苦労しました。

react-native-html-to-pdfはエラーを生成していないようですが、pdfにアクセスできないようです。ここで私が実行しているコードのスニペット：

import RNHTMLtoPDF from 'react-native-html-to-pdf'; 
import PDFView from 'react-native-pdf-view'; 

...

createPDF() { 

    var options = { 

     html: '<h1>PDF TEST</h1>', // HTML String 

     // ****************** OPTIONS BELOW WILL NOT WORK ON ANDROID **************        
     fileName: 'test',   /* Optional: Custom Filename excluded extention 
           Default: Randomly generated 
           */ 


     directory: 'docs',   /* Optional: 'docs' will save the file in the `Documents` 
           Default: Temp directory 
           */ 

     height: 800,    /* Optional: 800 sets the height of the DOCUMENT that will be produced 
           Default: 612 
           */ 
     width: 1056,    /* Optional: 1056 sets the width of the DOCUMENT that will produced 
           Default: 792 
           */ 
     padding: 24,    /* Optional: 24 is the # of pixels between the outer paper edge and 
             corresponding content edge. Example: width of 1056 - 2*padding 
             => content width of 1008 
           Default: 10 
           */ 
    }; 
    RNHTMLtoPDF.convert(options).then((filePath) => { 
     AlertIOS.alert(
      'creat pdf', 
      'filePath=' + filePath 
     ); 


     return (
       <PDFView ref={(pdf)=>{this.pdfView = pdf;}} 
        src={filePath} 
        onLoadComplete = {(pageCount)=>{ 
         this.pdfView.setNativeProps({ 
          zoom: 1.5 
         }); 
        }} 
       /> 
     ) 
    }); 
}; 

以降、私はそれを呼び出すコード内で：

<TouchableHighlight onPress={this.createPDF} style={styles.button}> 
       <Text>create pdf </Text> 
</TouchableHighlight> 

を私はAlertIOSを取得し、と有効なファイルパスのようなものです（パスを確認するためのヒントはすべて正しいことがわかります） それだけですが、私はtest.pdfドキュメントをどこにも見つけられません。 誰かが私が間違っていることを伝えることはできますか？

多くのおかげで、 Cheufte

Answer 1

私は、ファイル・パスは、あなたが最初のデバイスオプションをあなたのすべての情報をクリックすると、その検索するデバイスのオプションの後にXcodeでのウィンドウのオプションをクリックしてファイルのパスを通過することができますドキュメントディレクトリだと思いますデバイスが表示され、アプリケーションが選択され、そのコンテナが表示され、PDFファイルが見つかります。

var localpath= RNFS.DocumentDirectoryPath + filePath 
    <PDFView ref={(pdf)=>{this.pdfView = pdf;}} 
         path={localpath} 
         onLoadComplete = {(pageCount)=>{ 
          this.pdfView.setNativeProps({ 
           zoom: 1.5 
          }); 
         }} 
        /> 

廃止予定のため、書き込みパスはsrcの代わりになりました。

Answer 2

import React, { Component } from 'react'; 
import { 
    AlertIOS, 
    AppRegistry, 
    StyleSheet, 
    Text, 
    TouchableHighlight, 
    View 
} from 'react-native'; 

import RNHTMLtoPDF from 'react-native-html-to-pdf'; 

export default class testApp extends Component { 

createPDF() { 
    var options2 = { 
    html: '<h1>PDF TEST</h1>', // HTML String 

    // ****************** OPTIONS BELOW WILL NOT WORK ON ANDROID **************        
    fileName: 'test2',   /* Optional: Custom Filename excluded extension 
           Default: Randomly generated 
           */ 

    directory: 'docs',   /* Optional: 'docs' will save the file in the `Documents` 
           Default: Temp directory */ 

    base64: true ,    


    height: 800,     
    width: 1056,    /* Optional: 1056 sets the width of the DOCUMENT that will produced 
           Default: 792 
           */ 
    padding: 24,    /* Optional: 24 is the # of pixels between the outer paper edge and 
             corresponding content edge. Example: width of 1056 - 2*padding 
             => content width of 1008 
           Default: 10 
           */ 
     }; 

     RNHTMLtoPDF.convert(options2).then((data2) => { 
     console.log(data2.filePath); 
     console.log(data2.base64); 
     AlertIOS.alert(
      'options2 filename' + options2.fileName, 
      'data2 filePath=' + data2.filePath 
     ); 
    }); 
} 


render() { 
    return (
    <View style={styles.container}> 
    <Text style={styles.welcome}> 
     Welcome to testApp 
    </Text> 

    <TouchableHighlight onPress={this.createPDF}> 
    <Text>Create PDF</Text> 
    </TouchableHighlight> 

    <Text style={styles.instructions}> 
     Press Cmd+R to reload,{'\n'} 
     Cmd+D or shake for dev menu 
    </Text> 
    </View> 
    ); 
    } 
} 

const styles = StyleSheet.create({ 
    container: { 
    flex: 1, 
    justifyContent: 'center', 
alignItems: 'center', 
backgroundColor: '#F5FCFF', 
}, 
welcome: { 
fontSize: 20, 
textAlign: 'center', 
margin: 10, 
}, 
instructions: { 
textAlign: 'center', 
color: '#333333', 
marginBottom: 5, 
}, 
}); 


AppRegistry.registerComponent('testApp',() => testApp);