如何在android应用程序的react-native中解析json？

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

只是通过瓦片数组解析并添加绑定到该值的<Image/>组件。 注意：您将需要提供图像的高度和宽度，因为它们将被实时需要。

假设该文件夹结构..

/app 
    -index.ios.js 
/img 
    /AL 
    -AL_1.jpg 

的/AL/AL_1.jpg API调用来了..所以你需要预先声明要求以匹配的文件。这是假设文件直接在项目中，而不是在CameralRoll上。这里有一个完全不同的API。

index.ios.js

renderListItem(listItem) { 
    let tiles = listItem.tiles.map(tile => { 
    return (
     <View> 
     <Text>{tile.description}</Text> 
     <Image source={require(`../img/${tile.img}`)} style={{heigh: 50, width: 50}}/> 
     </View> 
    ) 
    }) 
    return (
    <View> 
     <Text>{listItem.label}</Text> 
     {tiles} 
    </View> 
);