Невозможно показать изображение в React Native

Я использую action-native 0.28.0

Я пытаюсь показать изображение на симуляторе iPhone в соответствии с этим учебным пособием: http://www.appcoda.com/react-native-introduction/

var styles = StyleSheet.create({
image: {
    width: 107,
    height: 165,
    padding: 10
  }
}

var imageURI = 'http://books.google.com/books/content?id=PCDengEACAAJ&printsec=frontcover&img=1&zoom=1&source=gbs_api'

Затем в функции render() я добавляю следующее:

<Image style={styles.image} source={{uri:imageURI}} />

Пространство, выделенное для изображения, есть, но изображение не отображается.

ОТВЕТЫ

Ответ 2

Надеюсь, что следующие решения могут помочь вам - все может быть использовано для изображения

1. HTTPS-решение:

  1. Ваша фотография предоставлена URI - source={{uri:imageURI}}
  2. Пример: source={{uri: 'https://i.vimeocdn.com/portrait/58832_300x300.jpg'}}
  3. Важно: не забудьте установить клип дважды: {{}}

2. HTTP-решение:

  1. Если вы хотите http, посмотрите следующее решение - проблема HTTP Github
  2. Решение: - HTTP-решение

3. Local-Picture

  1. Сохранить: создайте новую папку для ваших изображений и сохраните их там (папка: images)
  2. Требовать: запрашивать изображение, которое вы сохранили локально, используя синтаксис среди

var yourPicture = require ('./images/picture.jpg');

  • Обозначения для той же папки ('./')
  • Обозначение вышеуказанной папки ('../')
  • Запись для дополнительной папки выше ('../../../')
  1. Использование: Используйте ваше изображение в функции рендера
render(){
    return(
        <Image source={yourPicture}/>
    )
}

Стиль ваших изображений работает так, как вы описали

Ответ 3

При добавлении тега Image и использовании uri необходимо проверить следующее:

  • Добавление стиля ширины и высоты для тега изображения:
    например:
    <Image source={{uri: 'https://reactjs.org/logo-og.png'}} style={{width: 400, height: 400}}/>
    Имидж док

  • Использование HTTP-URL: вам нужно включить транспортную безопасность приложения
    Приложение транспортной безопасности для iOS

  • Использование HTTPS URL: он будет работать нормально

Ответ 4

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

Ответ 5

Моя проблема была в пути. /storage/emulated/0/Android/data/com.blah/blah.jpeg react-native-fs возвращает путь, например /storage/emulated/0/Android/data/com.blah/blah.jpeg но для компонентов Image требуется, чтобы он был file:///storage/emulated/0/Android/data/com.blah/blah.jpeg

Ответ 6

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

Для меня это проблема, с которой я сталкиваюсь.

Ответ 7

У меня была точно такая же проблема, и я решил установить то, что у вас получилось как var styles =... для const styles =... и чтобы это решило мою проблему.