如何在React Native应用程序中从URL查看和共享pdf？

Question

我在我的react本机应用程序中有一个用例，其中我必须从端点加载并显示pdf，还必须使用本机共享选项与附件（与Gmail应用程序或WhatsApp甚至下载它）共享附件（ ios和Android）。

我目前正在使用react-native-pdf库在应用程序上加载并显示pdf，并且工作正常。问题出在共享选项上。我尝试使用Facebook的Share API实现此目的，但不幸的是，由于pdf文件作为链接共享，因此它没有达到我的目的，并且在Android中，我必须将两个message and billurl传递相同的值（至少要获得跨平台的结果相同）。单击任何共享选项时，我希望将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);

有人遇到过类似情况或对此有任何解决方案吗？

想要以下类似内容（取自Google）

Answer 1

react-native-file-share是提供此功能的库。