Question

如何从我的React Native应用程序访问当前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>
            )
        })

对于Card图片，我需要访问student.studentImages.path并将带缩略图的图片设为true。如何访问？

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

React Native通过API调用访问图像

2 个答案: