React Native 从数据库中检索图像文件路径

Question

我想知道如何在 React Native 中为从数据库检索图像并将其显示给用户的应用程序建模。我打算将图像存储在一个目录中，并让一个数据库存储所有图像的文件路径。

但是，我发现其他人遇到的一个问题是 React Native 在源代码中需要一个完全静态的文件路径。我经常看到的一种解决方案是使用单个索引或 switch 语句来引用所有图像。但是，我认为这种模型不适用于我的应用程序，因为用户应该能够上传他们自己的图像，然后这些图像将存储在服务器上，并将其文件路径放入数据库中，但不会在开关中表示陈述。这种情况可能有什么样的解决方案？

Answer 1

对于我的 react-native 应用程序，为了上传照片，我使用 react-native-image-picker 从用户的设备中选择一张图片，然后使用 rns3 将图片发送到 aws s3。图片的文件名，我用的是app名，加上moment js库动态创建一个唯一的文件名。您也可以使用 uuid。

例如：

  ImagePicker.showImagePicker(options, response => {

    if (response.didCancel) {
      // alert cancel
    } else if (response.error) {
      // alert error
    } else {
      const { uri } = response;
      const extensionIndex = uri.lastIndexOf(".");
      const extension = uri.slice(extensionIndex + 1);

      const file = {
        uri,
        name: `${YourAppName}_${moment.utc().format("YYYY-MM-DD-HH-mm-ss")}.${extension}`,
        type: "image/jpeg"
      };

      const options = {
        keyPrefix: ****,
        bucket: ****,
        region: ****,
        accessKey: ****,
        secretKey: ****
      };

      // send file to aws s3 and to your db ...

      RNS3.put(file, options)
        .progress(event => {
          console.log(`percent: ${event.percent}`);
        })
        .then(response => {
          if (response.status !== 201) {
            console.error(response.body);
            return;
          }

          // this will contain the image url
          let image = response.headers.Location;

          // send image url to your db

        })
    })

要显示图像，只需使用存储在数据库中的 url。

React Native 从数据库中检索图像文件路径

React Native Retrieving Image file paths from Database

image

require

react-native