Почему мои изображения не отображаются в React Native

Question

Я пытаюсь показать некоторые изображения в своем приложении React Native.Это простое приложение, только для Android.Приложение получает информацию из API.Первоначальный вид представляет собой список элементов, и когда я щелкаю один элемент, он получает больше информации от API и отображается на новой странице.Я также получаю некоторые URL, которые указывают на изображения, которые хранятся в S3-контейнере в AWS.

Вот как я показываю изображения:

<ScrollView>
    {this.state.urls.map(url => {
        <Image 
            source={{uri: url}} 
            style={{width:400, height:200}}
        />
    }
</ScrollView>

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

Я искал ответ, нашел кое-что об использовании https вместо http (по крайней мере, для iOS).Обнаружил, что мне нужно установить ширину и высоту.Я уже делал эти вещи и другие, но это не работает.

Я также пытался просто выбрать изображение из интернета и поместить его URL-адрес прямо в URI, но оно все еще не работает.

Answer 1

Предполагая, что URL вашего изображения доступны в вашем приложении.Код ниже покажет ваши изображения.На самом деле вы забыли вернуть компонент из map, который должен иметь.

<ScrollView>
   {this.state.urls.map(url => {
       return <Image 
                source={{uri: url}} 
                style={{width:400, height:200}} /> }
   }
</ScrollView>

Answer 2

В вашей функции карты отсутствует оператор возврата.

<ScrollView>
    {this.state.urls.map(url => {
       return <Image 
            source={{uri: url}} 
            style={{width:400, height:200}}
        />
    }
</ScrollView>

ОБНОВЛЕНИЕ

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

Для дальнейшей отладки я попытаюсь создать один <Image .../> с изображением, размещенным на AWS, и посмотреть, сможете ли вы показать это.Может потребоваться некоторая конфигурация AWS, которую необходимо изменить, чтобы обеспечить доступ к изображению с мобильного устройства.