Question

我想在我的React本机FlatList视图中显示Google Spreadsheet数据。我将数据添加到SpreadSheet中，并通过脚本将这些数据提取为JSON格式，但这为我提供了2维JSON数据，这对我来说是困难的部分。我无法将2维JSON数据提取到我的本机平面列表中。我也尝试过离线

这是我的JSON数据： {"user":[{"name":"Arbaz","name2":"Salim"},{"name":"Imtiyaz","name2":"Kudekar"},{"name":"Shaikh ","name2":"Arbaz"}]}

那么如何将这些数据显示到我的单位列表中？

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',
 },

 });

我也尝试了JSON解析方法，但是它对我不起作用，它仅显示填充数据的第一行

Answer 1

如果您已提取数据并将其放入变量中，则假设x，则： const x =数据；

<FlatList
        data={x.user}
 ....
 />

在renderItem中，使用item.name或item.name2来获取值。我认为您收到的JSON没有任何问题！

如何将2维JSON数据显示到我的React Native FlatList

1 个答案: