我如何在我的React Native FlatList中显示2维JSON数据
[英]How I can display 2 Dimensional JSON Data to my React Native FlatList
问题描述
I have want to display Google Spreadsheet data into my React native FlatList view. 
我想将Google Spreadsheet数据显示到我的React本机FlatList视图中。 I added Data to my SpreadSheet and via Script I fetch those data into JSON format but it gives me a 2 Dimensional JSON Data , And this is the difficult part for me. 我将数据添加到SpreadSheet中，并通过脚本将这些数据提取为JSON格式，但这为我提供了2维JSON数据，这对我来说是困难的部分。 I was not able to fetch the 2 Dimensional JSON data to my react-native flat list. 我无法将2维JSON数据提取到我的本机平面列表中。 I also tried with offline 我也尝试过离线
This is My JSON Data: {"user":[{"name":"Arbaz","name2":"Salim"},{"name":"Imtiyaz","name2":"Kudekar"},{"name":"Shaikh ","name2":"Arbaz"}]} 这是我的JSON数据： {"user":[{"name":"Arbaz","name2":"Salim"},{"name":"Imtiyaz","name2":"Kudekar"},{"name":"Shaikh ","name2":"Arbaz"}]}
So how I can display this data to my Flat-list? 那么如何将这些数据显示到我的单位列表中呢？
import * as React from 'react'; import { Text, View, StyleSheet, ListView,Image,FlatList,List,ListItem } from 'react-native'; import { Header,Left,Body,Right,Title } from 'native-base'; import data from './sales.json'; const basketIcon = require('./123.png'); export default class App extends React.Component { render() { return ( <View style={{flex: 1, flexDirection: 'column'}}> <Header> <Left/> <Body> <Title>Header</Title> </Body> <Right /> </Header> <FlatList data={data} showsVerticalScrollIndicator={false} renderItem={({item}) => <View style={styles.row}> <View style={styles.iconContainer}> <Image source={basketIcon} style={styles.icon} /> </View> <View style={styles.info}> <Text style={styles.items}>{item.items} Items</Text> <Text style={styles.address}>{item.address}</Text> </View> <View style={styles.total}> <Text style={styles.date}>{item.date}</Text> <Text style={styles.price}>${item.total}</Text> </View> </View> } keyExtractor={(item, index) => index.toString()} /> </View> ) } } const styles = StyleSheet.create({ mainContainer: { flex: 1, backgroundColor: '#fff', }, title: { backgroundColor: '#0f1b29', color: '#fff', fontSize: 18, fontWeight: 'bold', padding: 10, paddingTop: 40, textAlign: 'center', }, row: { borderColor: '#f1f1f1', borderBottomWidth: 1, flexDirection: 'row', marginLeft: 10, marginRight: 10, paddingTop: 20, paddingBottom: 20, }, iconContainer: { alignItems: 'center', backgroundColor: '#feb401', borderColor: '#feaf12', borderRadius: 25, borderWidth: 1, justifyContent: 'center', height: 50, width: 50, }, icon: { tintColor: '#fff', height: 22, width: 22, }, info: { flex: 1, paddingLeft: 25, paddingRight: 25, }, items: { fontWeight: 'bold', fontSize: 16, marginBottom: 5, }, address: { color: '#ccc', fontSize: 14, }, total: { width: 80, }, date: { fontSize: 12, marginBottom: 5, }, price: { color: '#1cad61', fontSize: 25, fontWeight: 'bold', }, });
I tried with Parse JSON Method also but it didn't work for me It show only first row with filled data 我也尝试了Parse JSON Method，但对我却不起作用。它仅显示填充数据的第一行
1 个解决方案
解决方案1
0 2018-11-03 11:33:22
If you have extracted data and put that in a variable, suppose x, then: const x = data; 如果已提取数据并将其放在变量中，则假设x，则：const x = data;
<FlatList
data={x.user}
....
/>
And inside renderItem use item.name or item.name2 to get the value. 在renderItem中，使用item.name或item.name2来获取值。 I don't think there is anything wrong with the JSON you are receiving! 我认为您收到的JSON没有任何问题！
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.