CB77CFA4-D25F-4B2C-ADD0-2AED9892C031.png
最新的Webstorm已經(jīng)包含了JSX語(yǔ)法了，如何沒有提示亏钩，可以下載ReactNative-LiveTemplate。 下載地址：https://github.com/virtoolswebplayer/ReactNative-LiveTemplate
下面的就是用JSX實(shí)現(xiàn)的簡(jiǎn)單的九宮格布局 仪际，
React主要是Flex布局咸作，下面的文章寫得很詳細(xì)了悠瞬，http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
Image//導(dǎo)入圖片組件} from 'react-native';
//設(shè)置數(shù)據(jù)
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}>
{/*調(diào)用函數(shù)*/}
{this.renderAllBadge()}
</View> );
}
4519A434-CE2A-4D4D-AC87-0749C20D558F.png
//根據(jù)上面的數(shù)據(jù)for循環(huán)創(chuàng)建控件们豌，添加文字和圖片
// 定義函數(shù) renderAllBadge(){
var allData = [];
for (var i = 0;i<AllData.data.length;i++) {
var badge = AllData.data[i];
allData.push(
// key={i} ：for循環(huán)的創(chuàng)建的組件必須設(shè)置唯一標(biāo)示，不然會(huì)抱警告
<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;
}
}
//設(shè)置樣式
const styles = StyleSheet.create({
container: {
flexDirection:'row', //設(shè)置主軸方向
flexWrap:'wrap', //超出換行
backgroundColor: 'yellow',
width:width, //寬度等于屏幕寬度
height:height },
outViewS:{
backgroundColor:'gray',
alignItems:'center', //交叉軸的對(duì)齊方式
width:boxW,
height:boxW,
marginLeft:vMargin,
marginTop:hMargin },
imageStyle:{
width:80,
height:80 },
titleName:{
backgroundColor:'red'
}
}
);
AppRegistry.registerComponent('ImageDemo', () => ImageDemo);