Отредактировать переменную native use для файла изображения

Ответ 1

Для любого, кто узнает, что такое родной зверь, это должно помочь :)

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

Это другой подход, но в конечном итоге он окупается. По сути, лучшим подходом было бы загрузить все ваши ресурсы в одном месте. Рассмотрим следующую структуру

app  
   |--img
      |--image1.jpg
      |--image2.jpg
      |--profile
          |--profile.png
          |--comments.png
      |--index.js

В index.js вы можете сделать это:

const images = {
    profile: {
        profile: require('./profile/profile.png'),
        comments: require('./profile/comments.png'),
    },
    image1: require('./image1.jpg'),
    image2: require('./image2.jpg'),
};

export default images;

В ваших представлениях вы должны импортировать компонент изображений следующим образом:

import Images from './img/index';

render() {
    <Image source={Images.profile.comments} />
}

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

Da Man - Q: Как этот ответ использует переменную?

Ну, так как require принимает только буквальную строку, вы не можете использовать переменные, сцепленные строки и т.д. Это следующая лучшая вещь. Да, это все еще много работы, но теперь вы можете сделать что-то похожее на вопрос ОП:

render() {
  var images = { test100: "image100" };
  return (
    <View>
      <Text>
       test {images["test" + "100"]}
      </Text>
    </View>
  );
}

Ответ 2

В JS требуется, чтобы утверждения были разрешены во время расслоения (когда вычисляется расслоение JS). Поэтому он не поддерживает перенос выражения переменной в качестве аргумента для require.

В случае необходимости ресурсов это становится еще более сложным. Когда у вас есть require('./someimage.png'), React Native packager установит местное обязательное изображение, и оно будет добавлено вместе с приложением, чтобы его можно было использовать как "статический" ресурс, когда ваше приложение работает (фактически, в режиме dev он выиграл ' t свяжите изображение с вашим приложением, но вместо этого изображение будет подано с сервера, но это не имеет значения в вашем случае).

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

1) Добавьте его в качестве статического актива вашего приложения, а затем ссылку на него с <Image src={{uri:'name_of_the_image_in_assets.png'}}/> (здесь - это то, как вы можете добавить его в родное приложение для iOS )

2) Статически ставьте все изображения заранее. Sth в виде:

var randomImages = [
    require('./image1.png'),
    require('./image2.png'),
    require('./image3.png'),
    ...
];

Затем в коде вы можете:

<Image src={randomImages[Math.floor(Math.random()*randomImages.length)]}/>

3) Используйте сетевое изображение с <Image src={{uri:'http://i.imgur.com/random.jpg'}}/>

Ответ 3

class ImageContainer extends Component {
   this.state ={
     image:require('default-img')
   }
    <View>
           <Image source={this.state.image} />
    </View>
}

В контексте этой дискуссии у меня был случай, когда хотелось динамически назначать изображения для определенного фона. Здесь я меняю состояние следующим образом

this.setState({
  image:require('new-image')
})

Ответ 4

Я пришел к этой теме в поисках способа динамического добавления изображений. Я быстро обнаружил, что передача переменной Image → require() не работает.

Спасибо DerpyNerd за то, что вы вывели меня на правильный путь.

После внедрения ресурсов в одном месте я легко добавил изображения. Но мне все еще нужен был способ динамического назначения этих изображений на основе изменения состояния в моем приложении.

Я создал функцию, которая будет принимать строку из значения состояния, а затем возвращать изображение, которое логически соответствует этой строке.

Настроить

Структура изображения:

app  
  |--src
    |--assets
      |--images
        |--logos
          |--small_kl_logo.png
          |--small_a1_logo.png
          |--small_kc_logo.png
          |--small_nv_logo.png
          |--small_other_logo.png

        |--index.js
    |--SearchableList.js

В index.js меня есть это:

const images = {
  logos: {
    kl: require('./logos/small_kl_logo.png'),
    a1: require('./logos/small_a1_logo.png'),
    kc: require('./logos/small_kc_logo.png'),
    nv: require('./logos/small_nv_logo.png'),
    other: require('./logos/small_other_logo.png'),
  }
};

export default images;

В моем компоненте SearchableList.js я затем импортировал компонент Images следующим образом:

import Images from './assets/images';

Затем я создал новую функцию imageSelect в моем компоненте:

imageSelect = network => {
  if (network === null) {
    return Images.logos.other;
  }

  const networkArray = {
    'KL': Images.logos.kl,
    'A1': Images.logos.a1,
    'KC': Images.logos.kc,
    'NV': Images.logos.nv,
    'Other': Images.logos.other,
  };

  return networkArray[network];
};

Затем в моей функции render компонентов я вызываю эту новую функцию imageSelect чтобы динамически назначать желаемое изображение на основе значения в this.state.network:

render() {
  <Image source={this.imageSelect(this.state.network)} />
}

Еще раз, спасибо DerpyNerd за то, что я выбрал правильный путь. Я надеюсь, что этот ответ поможет другим. :)