[英]foreach loop for display data in elements, for json whit multiple array
[英]How foreach array json in react native? When the display elements are not the same
我有一個包含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函數,但不能。 我嘗試添加字符串,但我認為這不是解決方案。
有解決方案嗎?
謝謝大家
您可以chunk
的array
分為兩個部分為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
}
}
分塊array
方法:
chunk(array, chunkSize) {
return [].concat.apply([],
array.map(function (elem, i) {
return i % chunkSize ? [] : [array.slice(i, i + chunkSize)];
})
);
};
渲染項目:
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>)
}
您可以改用FlatList。
考慮例子
const row = [{key: 'a'}, {key: 'b'}]
FlatList用法:
<FlatList
data={row}
renderItem={(item) => this._renderItem(item)}
keyExtractor={extractKey}
extraData={row}
/>
內部渲染視圖功能:
_renderItem = ({item}) => {
return <Text>{item.key}</Text>
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.