时间戳

首页 > 解决方案 > 在 FlatList 或 List 中表示以下数据

react-native - 在 FlatList 或 List 中表示以下数据

问题描述

示例截图嗨，我正在尝试制作以下对象的平面列表我似乎不明白 renderItem 是如何工作的，因为我的键在 FlatList 中是唯一的。我试过了，Tried to get frame four out of range index NaN基本上需要第一个对象是 onPress 可以向我显示子对象的标题

this.setState({objToDisplay: parsedObj});

// parsedOgj is here 
Object {
   "Mike Smith": Object {
   "1534555555": "Helena",
  },
  "Jack": Object {
     "1553555897": "Cris",
  },
  "mrs bond": Object {
    "10101": "Test Expo",
    "8210": "Tester",
  },
  "test": Object {
    "2222": "Test Expo 2",
    "3333": "Test Expo 3",
  },
}
 <FlatList
      style={styles.list}
      data={this.state.objToDisplay}
      renderItem={({item}) =>()} // would to have Test and then arrow to see the sub object 
    />

标签： react-nativeexpo

解决方案

尝试将您的对象转换为组件可以读取的数组FlatList，然后使用renderItemprop 传递一个函数，该函数将返回列表的组件。

这是一个将对象转换为数组并将键显示为名称的示例：

obj = {
    'Mike Smith': {
      1534555555: 'Helena',
    },
    Jack: {
      1553555897: 'Cris',
    },
    'mrs bond': {
      10101: 'Test Expo',
      8210: 'Tester',
    },
    test: {
      2222: 'Test Expo 2',
      3333: 'Test Expo 3',
    },
  };

  data = Object.keys(this.obj).map(key => ({
    name: key,
    values: { ...this.obj[key] },
  }));

render() {
    return (
      <FlatList
      data={this.data}
      keyExtractor={item => item.name}
      renderItem={({ item }) => {
        return (
        <View>
          <Text>Name: {item.name}</Text>
        </View>
        );
      }}
      />
    );
  }

在此示例中，您的数据最终将如下所示：

this.data Array [
   Object {
     "name": "Mike Smith",
     "values": Object {
       "1534555555": "Helena",
     },
   },
   Object {
     "name": "Jack",
     "values": Object {
       "1553555897": "Cris",
     },
   },
   Object {
     "name": "mrs bond",
     "values": Object {
       "10101": "Test Expo",
       "8210": "Tester",
     },
   },
   Object {
     "name": "test",
     "values": Object {
       "2222": "Test Expo 2",
       "3333": "Test Expo 3",
     },
   },
 ]
 item Object {
   "name": "Mike Smith",
   "values": Object {
     "1534555555": "Helena",
   },
 }
 item Object {
   "name": "Jack",
   "values": Object {
     "1553555897": "Cris",
   },
 }
 item Object {
   "name": "mrs bond",
   "values": Object {
     "10101": "Test Expo",
     "8210": "Tester",
   },
 }
 item Object {
   "name": "test",
   "values": Object {
     "2222": "Test Expo 2",
     "3333": "Test Expo 3",
   },
 }

如果您希望将values键作为数组，只需将扩展运算符更改为另一个map()，它将起作用。

从这里你可以使用这个结构来创建你想要的组件并随心所欲地展示它们。

推荐阅读