pdf - 如何在 react native 应用程序中查看和共享来自 URL 的 pdf？

Question

我在我的 React native 应用程序中有一个用例，其中我必须从端点加载和显示 pdf，并使用 native 共享选项共享附件(到 Gmail 应用程序或 WhatsApp 或什至下载它) (ios 和 Android)。

我目前正在使用 react-native-pdf 库在应用程序上加载和显示 pdf，它工作正常。问题在于共享选项。我尝试使用 facebook 的 Share API为了实现这一点，但不幸的是，它没有达到我的目的，因为 pdf 文件作为链接共享，在 Android 中，我必须同时传递 message 和 pdfUrl 相同的值(至少要获得跨平台结果相同)。我希望在单击任何共享选项时将 pdf 文件作为附件共享。

下面是我的代码:

class ViewPdfScreen extends Component<Props, {}> {
  render() {

    const pdfUrl = 'http://samples.leanpub.com/thereactnativebook-sample.pdf'

    const source = {
      uri: pdfUrl,
      cache: true,
      expiration: 900, // cache file expired seconds (0 is not expired)
    };

    return (
      <View style={styles.container}>
        <View style={styles.subContainer}>
          <Text>{title}</Text>
          <TouchableOpacity onPress={() => this.sharePdf(title, pdfUrl)}>
            <Image source={shareBtn} />
          </TouchableOpacity>
        </View>
        <View style={styles.pdfContainer}>
          <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);
            }}
            onPressLink={uri => {
              console.log(`Link presse: ${uri}`);
            }}
            style={styles.pdf}
          />
        </View>
      </View>
    );
  }

  shareBill = (title: string, billUrl: string) => {
    Share.share(
      {
        message: billUrl,
        url: billUrl,
        title: title,
      },
      {
        // Android only:
        dialogTitle: `Share ${title}`,
        // iOS only:
        excludedActivityTypes: ['com.apple.UIKit.activity.PostToTwitter'],
      },
    )
      .then(res => console.log(res))
      .catch(error => console.log(error));
  };
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  subContainer: {
    elevation: 4,
    height: 100,
    flexDirection: 'row',
    backgroundColor: colors.orange,
    justifyContent: 'space-between',
    alignItems: 'flex-end',
    padding: 16,
  },
  pdfContainer: {
    flex: 1,
  },
  pdf: {
    flex: 1,
    width: Dimensions.get('window').width,
    height: Dimensions.get('window').height,
  },
});

export default connect()(ViewPdfScreen);

有没有人遇到过类似的情况或者有什么解决办法？

想要类似下面的东西(取自谷歌)

Answer 1

我已经设法使用 react-native-share 库解决了这个问题。但不幸的是，这在 Android 上共享时出现问题并抛出错误 Cannot attach the file。

在此分享答案，因为我无法在评论部分发布完整代码。

shareBill = async (title: string) => {
    const billPdfPath = this.props.billPdfDataFetched?.path;

    if (!billPdfPath) {
      return;
    }

    const newPath = `${RNFetchBlob.fs.dirs.CacheDir}/${title}_bill.pdf`;

    await RNFetchBlob.fs.cp(billPdfPath, newPath);

    const shareOptions = {
      title: title,
      subject: `${strings('emailSubject')} – ${title}`,
      message: `${title} bill`,
      url: `file://${newPath}`,
      type: 'application/pdf',
      failOnCancel: true,
    };

    try {
      await RNShare.open(shareOptions);
    } catch (err) {
      // do something here
    } finally {
      RNFetchBlob.fs.unlink(newPath);
    }
  };

AndroidManifest 文件的权限

<uses-permission android:name="android.permission.INTERNET" />
    <uses-permission tools:node="remove" android:name="android.permission.READ_PHONE_STATE" />
    <uses-permission tools:node="remove" android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
    <uses-permission tools:node="remove" android:name="android.permission.READ_EXTERNAL_STORAGE" />

如果其他人遇到与 Android 共享的类似问题，请帮助我。