react-native用FlatList实现九宫格布局

代码

import React, { Component } from 'react';
import {
  StyleSheet,
  Text,
  View,
  Dimensions,
  Image,
  FlatList,
} from 'react-native';

let data = require('./data.json');

export default class one extends Component {

  render() {
    return (
        }
        />
    )
  }
}
class GoodsList extends Component {
  constructor(props) {
    super(props);
  }
  render() {
    return (
      
        
        
          {this.props.name}
          ￥{this.props.price}
        
      
    )
  }
}
const styles = StyleSheet.create({
  container: {
    flexDirection: 'row',
    padding: 20,
  },
  goodsContainer: {
    flex:1, // 空间平均分布
    alignItems: 'center',
  },
  goodsImg: {
    width: 80,
    height: 80,
    marginRight: 10
  },
  goodsPrice: {
    color: '#f00'
  }
})

json文件内容：

{
    "data":[
        {
            "icon":"https://img.alicdn.com/tfscom/TB1zJPMtbSYBuNjSspfSuwZCpXa.jpg_80x80q90.jpg_.webp",
            "title":"电脑",
            "key":"1",
            "price": "20"
        },
        {
            "icon":"https://img.alicdn.com/tfscom/TB1zJPMtbSYBuNjSspfSuwZCpXa.jpg_80x80q90.jpg_.webp",
            "title":"电脑",
            "key":"1",
            "price": "20"
        },

        {
            "icon":"https://img.alicdn.com/tfscom/TB1zJPMtbSYBuNjSspfSuwZCpXa.jpg_80x80q90.jpg_.webp",
            "title":"电脑",
            "key":"1",
            "price": "20"
        },
        {
            "icon":"https://img.alicdn.com/tfscom/TB1zJPMtbSYBuNjSspfSuwZCpXa.jpg_80x80q90.jpg_.webp",
            "title":"电脑",
            "key":"1",
            "price": "20"
        },
        {
            "icon":"https://img.alicdn.com/tfscom/TB1zJPMtbSYBuNjSspfSuwZCpXa.jpg_80x80q90.jpg_.webp",
            "title":"电脑",
            "key":"1",
            "price": "20"
        },
        {
            "icon":"https://img.alicdn.com/tfscom/TB1zJPMtbSYBuNjSspfSuwZCpXa.jpg_80x80q90.jpg_.webp",
            "title":"电脑",
            "key":"1",
            "price": "20"
        },
        {
            "icon":"https://img.alicdn.com/tfscom/TB1zJPMtbSYBuNjSspfSuwZCpXa.jpg_80x80q90.jpg_.webp",
            "title":"电脑",
            "key":"1",
            "price": "20"
        },
        {
            "icon":"https://img.alicdn.com/tfscom/TB1zJPMtbSYBuNjSspfSuwZCpXa.jpg_80x80q90.jpg_.webp",
            "title":"电脑",
            "key":"1",
            "price": "20"
        },
        {
            "icon":"https://img.alicdn.com/tfscom/TB1zJPMtbSYBuNjSspfSuwZCpXa.jpg_80x80q90.jpg_.webp",
            "title":"电脑",
            "key":"1",
            "price": "20"
        },
        {
            "icon":"https://img.alicdn.com/tfscom/TB1zJPMtbSYBuNjSspfSuwZCpXa.jpg_80x80q90.jpg_.webp",
            "title":"电脑",
            "key":"1",
            "price": "20"
        },
        {
            "icon":"https://img.alicdn.com/tfscom/TB1zJPMtbSYBuNjSspfSuwZCpXa.jpg_80x80q90.jpg_.webp",
            "title":"电脑",
            "key":"1",
            "price": "20"
        },
        {
            "icon":"https://img.alicdn.com/tfscom/TB1zJPMtbSYBuNjSspfSuwZCpXa.jpg_80x80q90.jpg_.webp",
            "title":"电脑",
            "key":"1",
            "price": "20"
        },
        {
            "icon":"https://img.alicdn.com/tfscom/TB1zJPMtbSYBuNjSspfSuwZCpXa.jpg_80x80q90.jpg_.webp",
            "title":"电脑",
            "key":"1",
            "price": "20"
        },
        {
            "icon":"https://img.alicdn.com/tfscom/TB1zJPMtbSYBuNjSspfSuwZCpXa.jpg_80x80q90.jpg_.webp",
            "title":"电脑",
            "key":"1",
            "price": "20"
        },
        {
            "icon":"https://img.alicdn.com/tfscom/TB1zJPMtbSYBuNjSspfSuwZCpXa.jpg_80x80q90.jpg_.webp",
            "title":"电脑",
            "key":"1",
            "price": "20"
        },
        {
            "icon":"https://img.alicdn.com/tfscom/TB1zJPMtbSYBuNjSspfSuwZCpXa.jpg_80x80q90.jpg_.webp",
            "title":"电脑",
            "key":"1",
            "price": "20"
        },
        {
            "icon":"https://img.alicdn.com/tfscom/TB1zJPMtbSYBuNjSspfSuwZCpXa.jpg_80x80q90.jpg_.webp",
            "title":"电脑",
            "key":"1",
            "price": "20"
        },
        {
            "icon":"https://img.alicdn.com/tfscom/TB1zJPMtbSYBuNjSspfSuwZCpXa.jpg_80x80q90.jpg_.webp",
            "title":"电脑",
            "key":"1",
            "price": "20"
        },
        {
            "icon":"https://img.alicdn.com/tfscom/TB1zJPMtbSYBuNjSspfSuwZCpXa.jpg_80x80q90.jpg_.webp",
            "title":"电脑",
            "key":"1",
            "price": "20"
        },
        {
            "icon":"https://img.alicdn.com/tfscom/TB1zJPMtbSYBuNjSspfSuwZCpXa.jpg_80x80q90.jpg_.webp",
            "title":"电脑",
            "key":"1",
            "price": "20"
        },
        {
            "icon":"https://img.alicdn.com/tfscom/TB1zJPMtbSYBuNjSspfSuwZCpXa.jpg_80x80q90.jpg_.webp",
            "title":"电脑",
            "key":"1",
            "price": "20"
        },
        {
            "icon":"https://img.alicdn.com/tfscom/TB1zJPMtbSYBuNjSspfSuwZCpXa.jpg_80x80q90.jpg_.webp",
            "title":"电脑",
            "key":"1",
            "price": "20"
        },
        {
            "icon":"https://img.alicdn.com/tfscom/TB1zJPMtbSYBuNjSspfSuwZCpXa.jpg_80x80q90.jpg_.webp",
            "title":"电脑",
            "key":"1",
            "price": "20"
        },
        {
            "icon":"https://img.alicdn.com/tfscom/TB1zJPMtbSYBuNjSspfSuwZCpXa.jpg_80x80q90.jpg_.webp",
            "title":"电脑",
            "key":"1",
            "price": "20"
        }


        
    ]
}