Question

我无法在React Native中动态加载图像，该文件路径存储在sqlite数据库中。

考虑3个按钮：“显示图片1”，“显示图片2”，“显示图片3”

我可以简单地使用 source={require("./assets/image1.png")} 加载图像1.根据所按下的按钮，我可以在所有三个图像上使用require开关语句来返回我需要的需求。

但是，在加载应用程序之前，我不知道路径。我需要从数据库中检索它们，但不能这样做：

var image = imagePathFromDB;
require(image)

脱机数据库从联机数据库中提取用户指定的图像，由于这些图像可能会有很大的差异，因此无法提前指定所有可能的路径。

该应用程序正在开发，可同时用于Android和iOS。

2个问题：

在哪里存储图像文件的合适位置 ..更重要的是
如何动态检索和呈现它们？

Answer 1

在React native中，需要在编译包之前先加载所有图像源。

您可以通过使用开关盒来使用动态图像

喜欢

class App extends Component {
  state = { avatar: "" }

  get avatarImage() {
    switch (this.state.avatar) {
      case "car":
        return require('./car.png');
      case "bike":
        return require('./bike.png');
      case "bus":
        return require('./bus.png');
      default:
        return require('./defualt.png');
    }
  }

  render() {
    return <Image source={this.avatarImage} />
  }
}

以大小写形式放置图像，然后仅存储特定输出的大小写值

如何动态渲染图像以响应来自文件路径的本机

1 个答案: