将图像从 Firebase 存储链接到 Firestore 文档并在 React Native 中显示它们

Question

背景

我正在尝试手动将图像上传到 firebase 存储（使用网页中的上传文件按钮），但是我不知道以后如何将它们链接到 firestore 文档。我想出的（我不确定它是否有效）是复制存储桶中图像的 url 并将其添加到名为 profilePicture 的文档中的字符串类型字段中。我无法让它工作的原因是我对 React Native 真的很陌生，除了输入特定的本地路线之外，我不知道如何正确地要求图像。还请注意，我需要用户数据（例如个人资料名称）的方式是在使用电子邮件/密码身份验证登录后，我将数据作为参数传递以响应导航并将其作为额外数据。

我的尝试

一旦我复制了图像 url 并将其粘贴到 firestore 文档中，我将这样做：

const profilePicture = props.extraData.profilePicture;

<Image source={require({profilePicture})}/>

我也尝试过使用反引号，但这也不起作用。我收到的错误消息是：

TransformError src\screens\Profile\ProfileScreen.js: src\screens\Profile\ProfileScreen.js:Invalid call at line 27: require({
  profilePicture: profilePicture
})

注意：这是一个世博会管理的项目。

问题

问题出在代码中还是在我链接两个图像的方式上？也许两者兼而有之？我应该要求提供文件而不是依赖之前传递的数据吗？

提前非常感谢！

编辑 1：

我正在尝试从当前登录的用户那里获取所有信息，经过一些研究后，我了解到以这种方式需要图像：

const ref = firebase.storage().ref('path/to/image.jpg'); const url = 等待 ref.getDownloadURL();

然后我需要<Image source={{uri: url}}/>中的图像

我知道这对于静态的东西可能很有用，但我不知道如何为每个不同的用户更新 ref。

编辑 2：

尝试使用编辑 1 中提到的方法，只是想看看会发生什么，但是它似乎不起作用，图像只是没有显示。 可能是因为我的组件是函数组件而不是类组件（？

Answer 1

我了解您的目标是为上传到 Cloud Storage 的每张图片生成一个包含下载 URL 的 Firestore 文档。

如果这是正确的，一种方法是使用Cloud Function，每次将新文件添加到 Cloud Storage 时都会触发该Cloud Function。以下 Cloud Function 代码正是这样做的。您可以根据您的具体要求对其进行调整。

exports.generateFileURL = functions.storage.object().onFinalize(async object => {

    try {
        const bucket = admin.storage().bucket(object.bucket);
        const file = bucket.file(object.name);

        // You can check that the file is an image

        const signedURLconfig = { action: 'read', expires: '08-12-2025' };  // Adapt as follows

        const signedURLArray = await file.getSignedUrl(signedURLconfig);
        const url = signedURLArray[0];

        await admin.firestore().collection('profilePictures').add({ fileName: object.name, signedURL: url }) // Adapt the fields list as desired 
        return null;

    } catch (error) {
        console.log(error);
        return null;
    }

});

---

有关 Admin SDK here 的 getSignedUrl() 方法的更多信息。

还请注意，您可以自己分配 Firestore 文档 ID，而不是让 Firestore 生成它，如上面的代码所示（使用 add() 方法）。例如，您可以将用户的 uid 添加到图像元数据中，并在 Cloud Function 中获取此值并将此值用作文档 ID。

另一种可能性是使用用户的 uid 命名个人资料图像。