React Native实现商品九宫格布局

React Native实现商品九宫格布局

标签（空格分隔）： React

---

实现效果：

截图.png

首先将所需资源导入到XCode的图片资源中。(图片资源在下面贴出)，将json文件拖拽到ReactNative项目中(我个人是将json文件放到了一个自己新建的resource目录下，你根据自己的情况。只要找到json文件路径即可)

import React,{Component} from 'react';

import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    Image
} from 'react-native';

//导入json数据
var BadgeData = require('./source/shareData.json');

//导入屏幕分辨率的框架
var Dimensions = require('Dimensions');
//定义一些全局的变量
//屏幕的宽度
var {width} = Dimensions.get('window');

//定义一些全局的变量
var cols = 3;
var boxW = 100;
var vMargin = (width - cols*boxW)/(cols+1);
var hMargin = 25;


class movie extends Component{
    render(){
        return (
            
                {/*返回6个包*/}
                {this.renderAllBadge()}
            
        );
    }

    // 返回所有的包
    renderAllBadge(){
        // 定义数组装所有的子组件
        var allBadge = [];
        // 遍历json数据
        for (var i=0;i
                    
                    
                        {badge.title}
                    
                
            );
        }

        // 返回数组
        return allBadge;
    }
}

//设置样式
const styles = StyleSheet.create({
    container: {
    //    确定主轴的方向
        flexDirection:'row',
    //    一行显示不完的话换行显示
        flexWrap:'wrap'
    //    换行以后

    },
    outViewStyle:{
    //    设置侧轴的对齐方式
        alignItems:'center',
        width:boxW,
        height:boxW,
        marginLeft:vMargin,
        marginTop:hMargin
    },
    iconStyle:{
        width:80,
        height:80,
        marginBottom:5
    },
    mainTitleStyle:{

    }
});

AppRegistry.registerComponent('movie',()=>movie);

Demo所需资源

链接: https://pan.baidu.com/s/1dFzGRIx 密码: njn7