时间戳

首页 > 解决方案 > React Native 通过 API 调用访问图像

reactjs - React Native 通过 API 调用访问图像

问题描述

如何从我的反应本机应用程序访问当前 json 结构中的图像-

[
  {
    "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并获取具有缩略图的图像为真。我如何访问它？

标签： reactjsreact-native

解决方案

您需要从缩略图图像数组中过滤掉，才能为您提供第一个正确的缩略图。 

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>
                )
            })

推荐阅读