Question

我用json格式的数据

const infoData = [
    { "code": "AL", "label": "Alabama", "tiles": [{'description': 'The University Of Alabama', 'img': '/AL/AL_1.jpeg'}, {'description': 'Campus Map', 'img': '/AL/AL_2.jpeg'}, {'description': 'Seal of Alabama', 'img': '/AL/AL_3.png'}, {'description': 'University of Alabama - System', 'img': '/AL/AL_4.jpeg'}, {'description': 'Alabama', 'img': '/AL/AL_5.jpg'}, {'description': 'National Water Center', 'img': '/AL/AL_6.jpeg'}, {'description': 'President\'s Mansion', 'img': '/AL/AL_7.jpg'}, {'description': 'Bryant - Denny Stadium', 'img': '/AL/AL_8.jpeg'}, {'description': 'Governer - Elect', 'img': '/AL/AL_9.png'}, {'description': 'Motto Of Alabama', 'img': '/AL/AL_10.jpg'}] },
    { "code": "AK", "label": "Alaska", "tiles": [{'description': 'Alaska Map', 'img': '/AK/AK_1.png'}, {'description': 'Mediterranean Cruises', 'img': '/AK/AK_2.jpg'}, {'description': 'Alaska Cruises', 'img': '/AK/AK_3.jpg'}, {'description': 'Department of Natural Resources', 'img': '/AK/AK_4.jpg'}, {'description': 'Coastal Rainforest Center', 'img': '/AK/AK_5.jpeg'}, {'description': 'Alaska\'s Polar Bears', 'img': '/AK/AK_6.jpg'}, {'description': 'Alaska State Fair', 'img': '/AK/AK_7.jpg'}, {'description': 'Governors of Alaska', 'img': '/AK/AK_8.png'}, {'description': 'Alaska Railroad', 'img': '/AK/AK_9.jpg'}, {'description': 'University of Alaska', 'img': '/AK/AK_10.jpeg'}] },
    { "code": "AS", "label": "American Samoa", "tiles": [{'description': 'National Park', 'img': '/AS/AS_1.jpg'}, {'description': 'Ofu Beach', 'img': '/AS/AS_2.jpg'}, {'description': 'Tradewinds Hotel', 'img': '/AS/AS_3.jpg'}, {'description': 'American Samoa Territory', 'img': '/AS/AS_4.jpg'}, {'description': 'American Samoa Map', 'img': '/AS/AS_5.jpeg'}, {'description': 'American Samoa - Alchetron', 'img': '/AS/AS_6.jpg'}, {'description': 'Surfing', 'img': '/AS/AS_7.jpg'}, {'description': 'Power Authority', 'img': '/AS/AS_8.jpg'}, {'description': 'EPA Office', 'img': '/AS/AS_9.jpg'}, {'description': 'Pago Pago Hotel', 'img': '/AS/AS_10.jpeg'}] },
    { "code": "AZ", "label": "Arizona", "tiles": [{'description': 'Arizona - Logo', 'img': '/AZ/AZ_1.png'}, {'description': 'Arizona Sunsets', 'img': '/AZ/AZ_2.jpg'}, {'description': 'Arizona Map', 'img': '/AZ/AZ_3.jpg'}, {'description': 'The University Of Arizona', 'img': '/AZ/AZ_4.png'}, {'description': 'Arizona Geology', 'img': '/AZ/AZ_5.jpg'}, {'description': 'USS Arizona Memorial', 'img': '/AZ/AZ_6.jpeg'}, {'description': 'Luxury Phoenix Hotels', 'img': '/AZ/AZ_7.jpg'}, {'description': 'Arizona Inn (Tucson)', 'img': '/AZ/AZ_8.jpg'}, {'description': 'Global Village', 'img': '/AZ/AZ_9.jpg'}, {'description': 'Arizona Farm Bureau', 'img': '/AZ/AZ_10.jpeg'}] },
    { "code": "AR", "label": "Arkansas", "tiles": [{'description': 'University of Arkansas', 'img': '/AR/AR_1.jpg'}, {'description': 'Map of Arkansas', 'img': '/AR/AR_2.jpg'}, {'description': 'Flag of Arkansas', 'img': '/AR/AR_3.png'}, {'description': 'Peabody Hall', 'img': '/AR/AR_4.jpeg'}, {'description': 'AM³ Lab', 'img': '/AR/AR_5.jpg'}, {'description': 'State of Arkansas', 'img': '/AR/AR_6.jpg'}, {'description': 'IEEE of Arkansas', 'img': '/AR/AR_7.jpg'}, {'description': 'Western District of Arkansas', 'img': '/AR/AR_8.jpg'}, {'description': 'Shaping the University', 'img': '/AR/AR_9.jpg'}, {'description': 'Student Apartments', 'img': '/AR/AR_10.jpeg'}] },
    { "code": "CA", "label": "California", "tiles": [{'description': 'California Map', 'img': '/CA/CA_1.png'}, {'description': 'Resources in California', 'img': '/CA/CA_2.jpg'}, {'description': 'Beach Getaways', 'img': '/CA/CA_3.jpeg'}, {'description': 'California Gold Rush', 'img': '/CA/CA_4.jpeg'}, {'description': 'Student Aid Commission', 'img': '/CA/CA_5.png'}, {'description': 'Senators', 'img': '/CA/CA_6.jpg'}, {'description': 'Disney California Adventure Park', 'img': '/CA/CA_7.jpg'}, {'description': 'Disney California Adventure Park', 'img': '/CA/CA_8.jpg'}, {'description': 'Judicial Branch', 'img': '/CA/CA_9.png'}, {'description': 'California Wines', 'img': '/CA/CA_10.jpeg'}] },
];

我需要在android中的ListView中显示所有描述和图像，我使用下面的代码，我可以在ListView中显示标签，

renderListItem(listItem) {
return (
    <View>
      <Text>{listItem.label}</Text>
    </View>
);

}

但是我应该如何解析这些数据以在ListView中显示描述和图像（位于名为img的文件夹中）？

Answer 1

只需解析切片数组并添加绑定到该值的','.join()组件。注意：您需要提供图片的高度和宽度，因为它们是实时需要的。

假设这个文件夹结构..

<Image/>

/app -index.ios.js /img /AL -AL_1.jpg来自API调用..因此您需要在require语句前面添加匹配文件的位置。这假设文件直接在项目中，而不是在CameralRoll上。那里有一个完全不同的API。

<强> index.ios.js

/AL/AL_1.jpg

如何在反应原生的Android应用程序中解析json？

1 个答案: