七、做一个九宫格布局

本节的知识点

1.导入json、组件使用require('名称') 2.输出一个组件 module.exports = 类名;// 把类输出 3.获取屏幕的分辨率

// 获取屏幕的分辨率
var Dimensions = require('Dimensions');
//import Dimensions from 'Dimensions';
var {width,height} = Dimensions.get('window');
复制代码

e.g：

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

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

// 引用json文件
//var jsonData = require('./xx.json');

// 获取屏幕的分辨率
var Dimensions = require('Dimensions');
//import Dimensions from 'Dimensions';
var {width,height} = Dimensions.get('window');

// 三行三列
var col = 3;
var row = 3;
var vmaginspace = 20;
var itemW = (width - vmaginspace * (col + 1)) / col;

export default class DemoSecond extends Component {
  render() {
    return (
      <View style={styles.container}>
        {/* 调用方法*/}
        {this.bageDatas()}
      </View>
    );
  }

  // 创建九宫格布局
  bageDatas() {
    var bagedatas = [];
    for (var i=0; i < 9; i++) {
      bagedatas.push(
      <View key={i} style={styles.innerViewStyle}>
        <Image source={{uri:'name'}} style={styles.productImageStyle}/>
        <Text style={styles.productTitleStyle}>我是测试文字</Text>
      </View>
      );
    }
    return bagedatas;
  }
}

// ES6的写法写类
class ES6Class extends  Component {
  render() {
    return(
        <View>

        </View>
    );
  }
}

// ES5的写法写类
var tempClass = React.createClass(
{
  render() {
    return (
        <View style={{backgroundColor: 'red'}}>
          <Text>我是一个测试的文字</Text>
        </View>
    );
  }
})

const styles = StyleSheet.create({
  container: {
    //flex: 1,
    marginTop:20,
    flexDirection:'row',
    flexWrap:'wrap', // 支持换行
    backgroundColor: '#F5FCFF',
  },

  innerViewStyle:{
    marginLeft:vmaginspace,
    marginBottom:vmaginspace,
    width:itemW,
    height:itemW,
    backgroundColor:'gray',
    alignItems:'center'
  },

  productImageStyle: {
    marginTop:10,
    width:80,
    height:80,
    backgroundColor:'red'
  },

  productTitleStyle: {
    color:'white',
  }
});

AppRegistry.registerComponent('DemoSecond', () => tempClass);

//module.exports = tempClass; // 把类输出
// 应用外部的js文件
//var loginView = require('./index.ios');
// 返回组件（每个类都是一个组件）
// render中return
//<loginView/> // 这个使用方法就是一个组件
复制代码