Как динамически визуализировать изображения в соответствии с исходным путем из файлов

Question

У меня проблемы с динамической загрузкой изображений в React Native, в котором путь к файлу хранится в базе данных sqlite.

Рассмотрим 3 кнопки: «Показать изображение1», «Показать изображение2», «Показать изображение3»

Я мог бы просто использовать source={require("./assets/image1.png")} для загрузки изображения 1. Я мог бы использовать инструкцию switch для всех трех изображений, чтобы вернуть требуемое мне значение в зависимости от нажатой кнопки.

Однако я делаюне знаю пути до загрузки приложения. Мне нужно извлечь их из базы данных, и я не могу сделать:

var image = imagePathFromDB;
require(image)

Автономная база данных извлекает указанные пользователем изображения из онлайн-базы данных, из которой могут быть очень большие вариации изображений, поэтому с указанием всех возможных путей впередивремя невозможно.

Приложение разрабатывается для работы с Android и iOS.

2 Вопросы:

1. Где находится подходящее место для храненияфайлы изображений .. и что более важно
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} />
  }
}

поместите ваши изображения в футляр, а затем сохраните только значение регистра для конкретного вывода