React Native доступ к изображению из вызова API

Как мне получить доступ к изображению в текущей структуре json из моего собственного приложения React-

[
  {
    "id": "1",
    "height": "160",
    "student": {
      "name": "John",
      "studentImages": [
        {
          "thumbnail": true,
          "path": "https://..."
        },
        {
          "thumbnail": false,
          "path": "https://..."
        }
      ]
    }
  }
]

В настоящее время у меня есть -

return this.state.studentDataList.map((studentData) => {
            return (
                <View>
                    <Card image = {require('img')}>
                        <Text>{studentData.student.name}</Text>
                    </Card>
                </View>
            )
        })

Для изображения карты мне нужно получить доступ к student.studentImages.path и принять изображение с миниатюрой как истинное. Как мне получить к нему доступ?

Что такое компонент Card?

— Aravind S 25.07.2018 10:58

Это представление карты из react-native-elements

— user9765778 25.07.2018 10:59

попробуйте <Card image = {{ uri: studentData.student.studentImages[0].path}}> и посмотрите, какие изображения появляются

— Aravind S 25.07.2018 11:04
reactjs react-native
25.07.2018 10:56
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Массив зависимостей в React
Массив зависимостей в React
Все о массиве Dependency и его связи с useEffect.
1
3
54
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

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

return this.state.studentDataList.map((studentData) => {
                let thumbnailData = studentData.student.studentImages;
                let image = thumbnailData.find((img) => img.thumbnail);
                let imageSrc = image.path || '';
                return (
                    <View>
                        <Card image = {imageSrc}>
                            <Text>{studentData.student.name}</Text>
                        </Card>
                    </View>
                )
            })
25.07.2018 11:04

Вот код, который возвращает компонент Card, если эскиз верен.

return this.state.studentDataList.map(studentData => {
            studentData.student.studentImages.map(studentImages=>{
                return (
                    {studentImages.thumbnail && 
                    <View>
                        <Card image = {{ uri:studentImages.path }}>
                            <Text>{studentData.student.name}</Text>
                        </Card>
                    </View>}
                );
            })
        })
25.07.2018 12:01

Другие вопросы по теме

Java.lang.NoClassDefFoundError: Ошибка разрешения: Lcom / google / android / gms / common / internal / zzbo;
Создавайте плавающие головы чата, такие как facebook messenger
Знак вопроса в конце URL-адреса GET в отладке Chrome
Как лучше всего использовать пространство имен типографики в приложениях React Native
При переключении горизонтального экрана в интерфейсе есть вертикальный экран. Как это исправить?
Доступ к ref реагировать родной onpress
Как использовать свойство justify content в react native?
Манифест слияния провалился. После добавления и связывания response-native-splash-screen
Собственная функция реакции не определена внутри итератора
Как мы можем отобразить список категорий данных по горизонтали в реактивном списке

Похожие вопросы

Функция действия требуется с управлением загрузкой antd, но мне это не нужно
Динамическое изменение модальных данных
Свойство clientWidth кнопки ref return undefined
Снимите флажок Radio Button в reactjs
Невозможно правильно создать основной макет с помощью nextjs
Как использовать свойство justify content в react native?
Как отобразить страницу по базовому URL-адресу в React
Передача props.children условно визуализированному компоненту
Как запустить приложение React JS в фоновом режиме в Linux?
Собственная функция реакции не определена внутри итератора