Email 尝试生成PDF并使用React Native查看或发送电子邮件

过去几天我一直在玩react native html to pdf（）、react native mail（作者chirag04）和react native view pdf（作者cnjon）

parkerdan的react native mail的另一个版本我还没有尝试过，但是chrirag04的版本基本上破坏了我所有的项目，卸载起来很痛苦

react native html to pdf似乎不会生成任何错误，而且我似乎无法访问生成的pdf。下面是我正在运行的代码片段：

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

createPDF（）{
变量选项={
html:'PDF TEST'，//html字符串
//****************以下选项在ANDROID上不起作用*******************
文件名：'测试'，/*可选：自定义文件名排除扩展名
默认值：随机生成
*/
目录：'docs'，/*可选：'docs'将文件保存在'Documents'中`
默认值：临时目录
*/
高度：800，/*可选：800设置将生成的文档的高度
默认值：612
*/
宽度：1056，/*可选：1056设置将生成的文档的宽度
默认值：792
*/
padding:24，/*可选：24是纸张外边缘和边缘之间的像素数
相应的内容边缘。例如：1056-2*填充的宽度
=>内容宽度为1008
默认值：10
*/
};
RNHTMLtoPDF.convert（选项）。然后（（文件路径）=>{
警报(
“创建pdf”，
'文件路径='+文件路径
);
返回(
{this.pdfView=pdf；}
src={filePath}
onLoadComplete={（页面计数）=>{
this.pdfView.setNativeProps({
缩放：1.5
});
}}
/> 
)
});
};

在后面的代码中，我称之为：

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

创建pdf

我得到了AlertIOS，其中有一些看起来像是有效的文件路径（任何检查路径是否正确的提示，请告诉我） 但就是这样，我似乎在任何地方都找不到test.pdf文档。 谁知道我做错了什么

非常感谢,，

---

Cheufte

我认为文件路径是文档目录。您可以通过先单击xcode中的windows选项来查看文件路径，然后单击“查找设备”选项在单击“设备”选项后，将显示设备的所有信息，然后选择应用程序并查看其容器，您将找到您的pdf文件

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

var localpath=RNFS.DocumentDirectoryPath+filePath
{this.pdfView=pdf；}
路径={localpath}
onLoadComplete={（页面计数）=>{
this.pdfView.setNativeProps({
缩放：1.5
});
}}
/> 

写路径代替src，因为它已被弃用。

import React，{Component}来自'React'；
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);

进口{
AlertIOS，
评估学，
样式表，
文本，
触控高光，
看法
}从“反应本机”；
从“react native html to pdf”导入RNHTMLtoPDF；
导出默认类testApp扩展组件{
createPDF（）{
var选项2={
html:'PDF TEST'，//html字符串
//****************以下选项在ANDROID上不起作用*******************
文件名：'test2'，/*可选：自定义文件名扩展名
默认值：随机生成
*/
目录：'docs'，/*可选：'docs'将文件保存在'Documents'中`
默认值：临时目录*/
base64：是的，
身高：800，
宽度：1056，/*可选：1056设置将生成的文档的宽度
默认值：792
*/
padding:24，/*可选：24是纸张外边缘和边缘之间的像素数
相应的内容边缘。例如：1056-2*填充的宽度
=>内容宽度为1008
默认值：10
*/
};
RNHTMLtoPDF.convert（选项2）。然后（（数据2）=>{
console.log（data2.filePath）；
console.log（data2.base64）；
警报(
'options2 filename'+options2.filename，
“data2文件路径=”+data2.filePath
);
});
}
render（）{
返回(
欢迎来到testApp
PDF创建
按Cmd+R重新加载，{'\n'}
用于开发菜单的Cmd+D或shake
);
}
}
const styles=StyleSheet.create({
容器：{
弹性：1，
为内容辩护：“中心”，
对齐项目：“居中”，
背景颜色：“#F5FCFF”，
},
欢迎:{
尺寸：20，
textAlign:'中心'，
差额：10，
},
说明：{
textAlign:'中心'，
颜色：'#333333'，
marginBottom:5，
},
});
AppRegistry.registerComponent（'testApp'，（）=>testApp）；

是否在构造函数中绑定方法？如果没有，请尝试将onPress更改为

onPress={this.createPDF.bind（this）}

，看看这是否是您的问题。谢谢。这没什么区别。此警报显示已按预期触发RNHTMLtoPDF.convert函数。我只是键入了命令行中给出的文件路径，然后找到了文档。所以我想我的问题是怎么能

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);