react native flatlist 사용해서 local json 정렬 리스트만들기 (+ 가로정렬)

 

import React from 'react';
import { Image, SafeAreaView, View, FlatList, StyleSheet, Text, StatusBar ,ActivityIndicator} from 'react-native';
import {apoc} from '../../../clothes_information.json';//참조할local json

const GridView = ({ name, image, price}) => (//쓸 형식과 받을 인자 설정
    <View style={styles.gridbox}>
    <Image source={{uri:image}} style={{width: 150, height: 150}}/>//image source url 형식에 주의
      <Text style={styles.gridText}>{name}</Text>
      <Text style={styles.gridText}>{price}</Text>
    </View>
  );

const Index = () => {
      return (
        <SafeAreaView style={styles.container}>
          <FlatList numColumns={2}//한 열에 두 항목 띄울것
            data={apoc["001"]}//참조할 데이터는 apoc의 001이라는 데이터집합
            renderItem={({item})=><GridView name={item.name} 
            image={item.main_image} price={item.price}/>}//item을 render할때 gridview형식을 따를것이며 인자 설정
            keyExtractor={item => item.name}
          />
        </SafeAreaView>
      );
};

const styles = StyleSheet.create({
    container: {
      flex: 1,
      marginTop: StatusBar.currentHeight || 0,
    },
    gridbox: {
        flex: 1,
        height: 230,
        margin: 2,
        backgroundColor: '#FFFFFF',
        justifyContent: 'center',
        alignItems: 'center',
      },
     
      gridText: {
        fontSize: 15,
        color: 'black'
      }
  });

export default Index;

<HomeScreen.js>

 

json 파일형식은

apoc": {
    "001": [
      {
        "name": "HTT Longsleeve_White",
        "price": "10000won",
        "main_image": "https://image.msscdn.net/images/goods_img/20180910/854746/854746_3_500.jpg"
      },
      {
        "name": "HTT Longsleeve_Black",
        "price": "",
        "main_image": "https://image.msscdn.net/images/goods_img/20180910/854753/854753_7_500.jpg"
      },
      {
      ...
      }
      ]
      "003":[
      ...
      ]
 }

이런 식이였다.