React Native从API调用访问图像

Question

如何从我的本机应用程序访问当前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并拍摄缩略图为真的图像。我该如何访问它？

Answer 1

您需要从缩略图图像数组中过滤出来，为您提供第一个真实的缩略图。

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

Answer 2

如果缩略图为true，则返回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>}
                );
            })
        })