Используйте <Image> с локальным файлом

react-native

62852 просмотра

8 ответа

246 Репутация автора

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

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

Автор: Blai Pratdesaba Источник Размещён: 26.03.2015 11:06

Ответы (8)


-10 плюса

37 Репутация автора

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

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

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

var styles = StyleSheet.create({
   image:{
    width: 360,
    height: 40,
  }
});
Автор: luca mezzalira Размещён: 27.03.2015 12:21

5 плюса

825 Репутация автора

Из примера приложения 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>
  );
}
Автор: Jake Marsh Размещён: 27.03.2015 03:52

19 плюса

444 Репутация автора

Решение

Это работает именно так, как вы ожидаете, что это будет работать. Существует ошибка 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/ тянуть / 286 / файлы . Это будет работать волшебно :)

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

Автор: syrnick Размещён: 29.03.2015 04:11

5 плюса

7184 Репутация автора

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

введите описание изображения здесь

Автор: crockpotveggies Размещён: 19.12.2015 06:45

0 плюса

471 Репутация автора

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

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

Автор: Vijay Vepakomma Размещён: 04.03.2017 04:39

24 плюса

784 Репутация автора

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

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

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

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

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

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

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

Автор: spechter Размещён: 19.03.2017 12:40

1 плюс

61 Репутация автора

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

Logo.json

{"file" : "base64 big string"}

App.js

import Logo from '.../Logo.json'
...
<Image source:{{uri:Logo.file}} />
Автор: Bruno Размещён: 05.01.2018 04:48

0 плюса

113 Репутация автора

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

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

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

Автор: apurv thakkar Размещён: 02.09.2019 12:53
Вопросы из категории :
32x32