React Native - Что плохого в динамическом рендеринге изображений из локального хранилища?

Question

Я испробовал практически все решения от stackoverflow & github, но, к сожалению, у меня ничего не получается!

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

<Image style={{width: 50, height: 50}} source={require('./hulk.png')} />

Но это не сработает, если я сохраню значение в переменной, а затем помещу эту переменную в требование следующим образом

let legendPic = `./${this.props.title.toLowerCase()}.png`;
........
<Image style={{width: 50, height: 50}} source={require(legendPic)} />

Вот код моего метода renderDescription

renderDescription = () => {
    if(this.props.id === this.props.selectedLibraryId) {
      let legendPic = `./${this.props.title.toLowerCase()}.png`;
      console.log(legendPic);
      return(
        <CardSection>
          <Image 
            style={{height: 50, width: 50}} 
            //source={require(legendPic)} 
          />
          <Animatable.Text animation='lightSpeedIn'>{this.props.description}</Animatable.Text>
        </CardSection>
      );
    }
  }

Из консоли я получаю желаемый вывод, но он не работает с require.

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

Я попробовал все возможные решения здесь stackoverflow

Консольный вывод:

Если вы хотите увидеть весь исходный код Github Link

Спасибо в

Answer 1

вы должны включить все необходимые активы в объект, подобный этому:

const assets = {
  key: require('./path-to-image'),
  key2: require('./path-to-image'),
  key3: require('./path-to-image'),
}

, где вы называете свои ключи на основе вашего props.title

, а затем вы динамически меняете свое изображение с этогообъект, подобный этому:

renderDescription = () => {
    if(this.props.id === this.props.selectedLibraryId) {
      let legendPic = assets[this.props.title.toLowerCase()];
      console.log(legendPic);
      return(
        <CardSection>
          <Image 
            style={{height: 50, width: 50}} 
            source={legendPic} 
          />
          <Animatable.Text animation='lightSpeedIn'>{this.props.description}</Animatable.Text>
        </CardSection>
      );
    }
  }