如何在 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 调用中出现。因此您需要在 require 语句之前添加文件以匹配文件所在的位置。这是假设文件直接在项目中，而不是在 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>
  );