如何将broswer共享的文件数据接收到ReactNative Mobile应用程序中

Question

TLDR

我有一个react原生移动应用程序，它需要接收其他应用程序共享的文件。

详细信息：

我正在尝试在自己的应用程序中接收此文件。由于我是React/Rect native/Expo/Android开发的新手，我不确定它是如何在React native中编码的。

0. 将移动设备连接到手机，并允许开发和共享。或已准备好模拟器

移动应用程序：

在终端中运行以下命令：

git clone https://github.com/dimaportenko/react-native-receive-share-file-tutorial
run yarn install
run yarn android

浏览器：

4. 在手机浏览器中导航至https://w3c.github.io/web-share/demos/share-files.html

5. 填充数据。

6. 附加一个文件。

7. 单击"共享">

8. 选择"rnreceivesharetutorial">

9. 这应该显示类似以下的内容

   接收文件阵列[对象{"contentUri"：无效的"扩展"：无效的"fileName"：无效的"filePath"：无效的"主题"："凭证提供"；，"文本"："选择一个钱包来处理此优惠&"；，"weblink"：无效的}，]

问题：

你能分享一些代码让我获得文件数据吗？

该网站确实共享了文件数据。作为证明：如果你在手机上选择了电子邮件/gmail应用程序，它应该将该文件作为附件添加。

Answer 1

您可以使用RNFS 下载数据

import * as RNFS from 'react-native-fs';
let offlinePackageResponse = await RNFS.config({
fileCache: true,
timeout: 9999999,
background: true, // iOS only
}).fetch(method, path, header)
.progress(callback);

console.log(`file save at ${offlinePackageResponse.path()}`);

您可以作为访问该文件

await RNFS.readFile(offlinePackageResponse.path(), 'base64')

Answer 2

我没有收到本地文件的Location。我使用了另一个库：https://github.com/meedan/react-native-share-menu.我收到文件的位置。然后我们可以使用文件读/写库来获取内容。

RNFS.readFile(data.data)
.then((fileString: string) => {
console.log(`file contents : ${fileString}`);

});