Производительность require при использовании в источнике компонента изображения

Я новичок, чтобы реагировать родной и у меня есть некоторые проблемы с компонентом изображения реакции Я прочитал документацию и искал несколько статей и вопросов, задаваемых по переполнению стека. Мне пришла в голову мысль, что src компонента Image может принимать строку (путь из локального или URL-адрес), или мы можем использовать require со строкой в ​​качестве периметра для загрузки изображения. Проект, над которым я работаю, содержит более 50 изображений, и те, которые нужно визуализировать, определяются во время выполнения. Раньше я планировал использовать переменные, которые требуют периметра для динамической загрузки изображений, но в ходе исследований мне стало известно, что это невозможно сделать, и у реагировать native нет планов по предоставлению такой функции.

Я пришел с идеей создать объект, содержащий требование в качестве значения.

export const subCategories = {
  'protection':[
     [
      {
        imageUrl: require('../imag`enter code here`es/trees.png'),
        title: 'Protection',
        value: 'p_1'
      },
      {
        imageUrl: require('../images/eco-tag.png'),
        title: "From Enemy",
        value: 'p_2'

      },
      {...

   'daily':[
     [
      {
        imageUrl: require('../images/trees.png'),
        title: 'Morning',
        value: 'd_1'
      },
      {
        imageUrl: require('../images/eco-tag.png'),
        title: "Evening",
        value: 'd_2'

      },
      {...

И решить, какой объект выбрать, основываясь на периметре навигации, переданном компоненту.

this.state = {
            data: subCategories[this.props.navigation.state.params.value]
    ...

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

imageUrl: require('../images/eco-tag.png')

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

<Image source={ this.props.imageUrl } style = { styles.image }  />

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

PS: я экспортирую данные в файл JS и импортирую их при перенаправлении на экран. Я также хотел бы знать, если это правильный путь.

Источник

1 ответ

Для времени рендеринга попробуйте использовать функцию:

       {
    imageUrl: () => require('../trees.png'),
    title: 'Protection',
    value: 'p_1'
  }

и в компоненте:

      <Image source={ this.props.imageUrl() } style = { styles.image }  />
Источник
Другие вопросы по тегам