CB77CFA4-D25F-4B2C-ADD0-2AED9892C031.png

最新的Webstorm已经包含了JSX语法了，如何没有提示，可以下载ReactNative-LiveTemplate。 下载地址：https://github.com/virtoolswebplayer/ReactNative-LiveTemplate
下面的就是用JSX实现的简单的九宫格布局 ，
React主要是Flex布局，下面的文章写得很详细了，http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

 import React, { Component } from 'react';
import {  
  AppRegistry, 
  StyleSheet,  
  Text,                                      
  View,     
  Image//导入图片组件} from 'react-native';
//设置数据
var  AllData =     require('./BadgeData.json');
var Dimensions = require('Dimensions');
//获取屏幕的宽高
var {width, height} = Dimensions.get('window');
 //全局变量var cols = 3;
var boxW = 100;
var vMargin  = (width - cols*boxW)/(cols + 1);
var hMargin = 50;
class ImageDemo extends Component {  
    render() {    
      return (      
            <View style={styles.container}>       
             {/*调用函数*/}        
            {this.renderAllBadge()}     
             </View>    ); 
  }

4519A434-CE2A-4D4D-AC87-0749C20D558F.png

//根据上面的数据for循环创建控件，添加文字和图片
 //  定义函数  renderAllBadge(){     
   var  allData = [];      
  for (var i = 0;i<AllData.data.length;i++)      {        
        var  badge = AllData.data[i];       
       allData.push(   
//  key={i} ：for循环的创建的组件必须设置唯一标示，不然会抱警告      
               <View key={i} style={styles.outViewS}> 
              <Image source={{uri:badge.icon}} style={styles.imageStyle}></Image>                                
              <Text style={styles.titleName}>{badge.title}</Text>            
              </View>        );     
          }      
      return allData;  
    }
}

//设置样式

const styles = StyleSheet.create({    
  container: {      
       flexDirection:'row', //设置主轴方向
       flexWrap:'wrap', //超出换行    
       backgroundColor: 'yellow',      
       width:width,  //宽度等于屏幕宽度    
       height:height    },    
  outViewS:{      
      backgroundColor:'gray',      
      alignItems:'center',   //交叉轴的对齐方式    
       width:boxW,       
       height:boxW,        
       marginLeft:vMargin,        
      marginTop:hMargin    },    
  imageStyle:{      
      width:80,      
      height:80    },    
    titleName:{      
    backgroundColor:'red'   
   }
  }
);

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