foreach数组json在本机中如何反应？当显示元素不相同时

我有一个包含5个元素的数组：

[
  {
    "id": 1,
    "title": "Title 1",
    "description": "descriptions"
  },
  {
    "id": 2,
    "title": "Title 1",
    "description": "descriptions"
  },
  {
    "id": 3,
    "title": "Title 1",
    "description": "descriptions"
  },
  {
    "id": 4,
    "title": "Title 1",
    "description": "descriptions"
  },
  {
    "id": 5,
    "title": "Title 1",
    "description": "descriptions"
  }
]

我希望他们的表现如下：

<Item>
  <Text style={styles.cardText}>Title 1</Text>
  <Text style={styles.cardText} numberOfLines={2}>Description 1</Text>
</Item>
<Grid>
  <Col>
    <Item>
      <Text style={styles.cardText}>Title 2</Text>
      <Text style={styles.cardText} numberOfLines={2}>Description 2</Text>
    </Item>
  </Col>
  <Col>
    <Item>
      <Text style={styles.cardText}>Title 3</Text>
      <Text style={styles.cardText} numberOfLines={2}>Description 3</Text>
    </Item>
  </Col>
</Grid>
<Grid>
  <Col>
    <Item>
      <Text style={styles.cardText}>Title 4</Text>
      <Text style={styles.cardText} numberOfLines={2}>Description 4</Text>
    </Item>
  </Col>
  <Col>
    <Item>
      <Text style={styles.cardText}>Title 5</Text>
      <Text style={styles.cardText} numberOfLines={2}>Description 5</Text>
    </Item>
  </Col>
</Grid>

如何在React Native中显示上述内容

我尝试使用datas.map函数，但无法使用。 我试图添加字符串，但我认为这不是解决办法

有解决办法吗

---

谢谢大家。

您可以改用平面列表

以身作则

const row = [{key: 'a'}, {key: 'b'}]

平面列表用法：

<FlatList
        data={row}
        renderItem={(item) => this._renderItem(item)}
        keyExtractor={extractKey}
        extraData={row}
        />

渲染视图内部函数：

    _renderItem = ({item}) => {
    return <Text>{item.key}</Text>
   }

可以将数组分为2个部分，用于索引而不是0

constructor() {
    super();
    this.state = {
        data: [
            {
                "id": 1,
                "title": "Title 1",
                "description": "descriptions"
            },
            {
                "id": 2,
                "title": "Title 1",
                "description": "descriptions"
            },
            {
                "id": 3,
                "title": "Title 1",
                "description": "descriptions"
            },
            {
                "id": 4,
                "title": "Title 1",
                "description": "descriptions"
            },
            {
                "id": 5,
                "title": "Title 1",
                "description": "descriptions"
            }
        ],
        chunk: this.chunk
    }
} 

分块数组的方法：

呈现项目：

render() {
    let { data, chunk } = this.state;
    let dataForChunk = [...data];
    dataForChunk.splice(0, 1); //removes 1st index of array
    let chunkedArr = chunk(dataForChunk, 2);

    return (<View style={{flex: 1}}>
        <Item>
            <Text style={styles.cardText}> {data[0].title} </Text>
            <Text style={styles.cardText} numberOfLines={2} > {data[0].description} </Text>
        </Item>
        {chunkedArr.map((arr, index) => {
            return(
                <Grid>
                    {arr.map(item => {
                        return(
                            <Col>
                                <Item>
                                    <Text style={styles.cardText} >{item.id}</Text>
                                    <Text style={styles.cardText} numberOfLines={2}>{item.description}</Text>
                                </Item>
                            </Col>
                        );
                    })}
                </Grid>
            )
        })}
    </View>)
}

---

我习惯了。非常感谢！

render() {
    let { data, chunk } = this.state;
    let dataForChunk = [...data];
    dataForChunk.splice(0, 1); //removes 1st index of array
    let chunkedArr = chunk(dataForChunk, 2);

    return (<View style={{flex: 1}}>
        <Item>
            <Text style={styles.cardText}> {data[0].title} </Text>
            <Text style={styles.cardText} numberOfLines={2} > {data[0].description} </Text>
        </Item>
        {chunkedArr.map((arr, index) => {
            return(
                <Grid>
                    {arr.map(item => {
                        return(
                            <Col>
                                <Item>
                                    <Text style={styles.cardText} >{item.id}</Text>
                                    <Text style={styles.cardText} numberOfLines={2}>{item.description}</Text>
                                </Item>
                            </Col>
                        );
                    })}
                </Grid>
            )
        })}
    </View>)
}