Используйте <Изображение> с локальным файлом

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

Но я не уверен, где отреагировать на эти образы. В примерах нет домена, поэтому кажется, что вам нужно перейти к Xcode и добавить их в Images.xcassets, но это не сработало для меня.

Ответ 1

Он работает точно так же, как вы ожидаете, что он будет работать. Там есть ошибка https://github.com/facebook/react-native/issues/282, которая предотвращает ее правильную работу.

Если у вас есть node_modules (с response_native) в той же папке, что и проект xcode, вы можете отредактировать node_modules/react-native/packager/packager.js и внести это изменение: https://github.com/facebook/react-native/pull/286/files. Он будет работать волшебным образом.

Если ваш action_native установлен где-то еще, и исправление не работает, прокомментируйте https://github.com/facebook/react-native/issues/282, чтобы сообщить им о вашей настройке.

Ответ 2

Используя React Native 0.41 (в марте 2017 г.), ориентируясь на iOS, я просто нашел это так:

<Image source={require('./myimage.png')} />

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

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

Обратите внимание, что если в имени файла есть что-либо, кроме строчных букв, или путь не является чем-то большим, чем "./", то для меня это начало сбой. Не знаете, какие существуют ограничения, но начните с простого и работайте дальше.

Надеюсь, это кому-нибудь поможет, поскольку все приведенные выше ответы кажутся слишком сложными и полными (непослушными) сторонних ссылок.

ОБНОВЛЕНИЕ: КСТАТИ - Официальная документация для этого здесь:https://facebook.github.io/react-native/docs/images.html

Ответ 3

Из примера приложения UIExplorer:

Статические активы должны быть обязательными с помощью префикса image! и расположены в комплекте приложений.

Так вот так:

render: function() {
  return (
    <View style={styles.horizontal}>
      <Image source={require('image!uie_thumb_normal')} style={styles.icon} />
      <Image source={require('image!uie_thumb_selected')} style={styles.icon} />
      <Image source={require('image!uie_comment_normal')} style={styles.icon} />
      <Image source={require('image!uie_comment_highlighted')} style={styles.icon} />
    </View>
  );
}

Ответ 4

У меня была такая же проблема, пока я не понял, что не поместил изображение в свой Image.xcassets. Я смог перетащить его в Xcode с Image.xcassets открытым и после восстановления, он исправил проблему!

Ответ 5

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

Logo.json

{"file" : "base64 big string"}

App.js

import Logo from '.../Logo.json'
...
<Image source:{{uri:Logo.file}} />

Ответ 6

Это от https://github.com/facebook/react-native/issues/282 работало для меня:

adekbadek прокомментировал ноябрь 11, 2015 Следует отметить, что вам не нужно помещать изображения в Images.xcassets - вы просто помещаете их в корневой каталог проекта, а затем просто требуете ( "./myimage.png" ), поскольку @anback написал Посмотрите на этот ответ SO и потяните его за ссылку

Ответ 7

Чтобы отобразить изображение из локальной папки, вам нужно записать код:

 <Image source={require('../assets/self.png')}/>

Здесь я положил свое изображение в папку активов.

Ответ 8

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

<Image style={styles.image} source={{uri: "http://www.mysyte.com/myimage.jpg"}} />

помните, чтобы затем установить ширину и высоту с помощью свойства style:

var styles = StyleSheet.create({
   image:{
    width: 360,
    height: 40,
  }
});