时间戳

首页 > 解决方案 > 在 React Native 中，Flatlist 循环遍历嵌套数组

react-native - 在 React Native 中，Flatlist 循环遍历嵌套数组

问题描述

我正在尝试遍历我的 React 本机应用程序中的嵌套数组。

我尝试使用 for 循环，但没有奏效。我还是 React 的新手，所以我不太熟悉如何循环

现在我要做的是只显示数组newRow中每个对象中的数据row

使用{ item.newRow[0].name }确实有效我想循环newRow显示所有新行

如何遍历所有行并newRows显示所有行？

示例数组：

  {
    id: 0, 
    text: 'View',
    newRow: [
    {id: 0, text: 'View'},
    {id: 1, text: 'Text'},
    {id: 2, text: 'Image'},
    {id: 3, text: 'ScrollView'},
    {id: 4, text: 'ListView'},
    ]
  },
  {id: 1, text: 'Text',
    newRow: [
    {id: 0, text: 'View'},
    {id: 1, text: 'Text'},
    {id: 2, text: 'Image'},
    {id: 3, text: 'ScrollView'}, 
    {id: 4, text: 'ListView'},
    ]
  },
  {id: 2, text: 'Image'},
  {id: 3, text: 'ScrollView'},
  {id: 4, text: 'ListView'},

示例代码：

import React, { Component } from 'react';
import { FlatList, Text, StyleSheet,View } from 'react-native';

const rows = [
  {
    id: 0, 
    text: 'View',
    newRow: [
    {id: 0, text: 'View'},
    {id: 1, text: 'Text'},
    {id: 2, text: 'Image'},
    {id: 3, text: 'ScrollView'},
    {id: 4, text: 'ListView'},
    ]
  },
  {id: 1, text: 'Text',
    newRow: [
    {id: 0, text: 'View'},
    {id: 1, text: 'Text'},
    {id: 2, text: 'Image'},
    {id: 3, text: 'ScrollView'}, 
    {id: 4, text: 'ListView'},
    ]
  },
  {id: 2, text: 'Image'},
  {id: 3, text: 'ScrollView'},
  {id: 4, text: 'ListView'},

]

// const rowsNewRow = rows[i].newRow

const extractKey = ({newRow}) => newRow

export default class App extends Component {

  renderItem = ({item}) => {
    return (
      <Text style={styles.row}>
        {item.text}
      </Text>
    )
  }

  renderLoop = ({item}) => {
   var items= [];

    for(let i = 0; i < item; i++){

      items.push(
        <View key = {i}>
          <View>
           <Text style={styles.row}>
            {item.text}
          </Text>
          </View>
          <View>

          </View>
          <View>

          </View>
        </View>
      )
    }
  }

  render(

  ) {
    return (
      <View  style={styles.container}>

      <FlatList
        style={styles.container}
        data={rows}
        renderItem={this.renderItem}
        keyExtractor={extractKey}
      />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    marginTop: 20,
    flex: 1,
  },
  row: {
    padding: 15,
    marginBottom: 5,
    backgroundColor: 'skyblue',
  },
})

示例应用

标签： react-native

解决方案

听起来您正在考虑将 newRow 数组中的项目包含在您在 FlatList 中创建的行中。

这可以通过将您的renderItem功能更新为这样的方式来实现

renderItem = ({item}) => {
  let items = [];
  if( item.newRow) {
    items = item.newRow.map(row => {
      return <Text>{row.text}</Text>
    })
  } 

  return (
    <View>
      <Text style={styles.row}>
        {item.text}
      </Text>
      {items}
    </View>
  )
}

我正在做的是

  1. 创建一个空数组来保存映射newRow项
  2. 检查newRow数组是否存在
  3. 如果它存在，那么我将它映射到一个数组
  4. 更新 return 函数，使其返回所有项目

这是带有工作代码的小吃https://snack.expo.io/@andypandy/flatlist-with-nested-array

推荐阅读