/**
* 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 bags = require('./bags.json');
// 屏幕宽度
var Dimensions = require('Dimensions');
var {width} = Dimensions.get('window');
// 定义一些变量
var cosl = 3;
var itemW = 100;
var vmargin = (width - cosl*itemW) / (cosl+1);
export default class helloworld extends Component {
render() {
return (
<View style={styles.container}>
{this.renderBags()}
</View>
);
}
renderBags(){
var result = [];
for (var i = 0; i < bags.data.length; i++) {
var bag = bags.data[i];
result.push(
<View key={i} style={styles.item}>
<Image source={require('./img/bag.png')} style={styles.imagesStyle}/>
<Text style={{backgroundColor: "red"}}>
{bag.name}
</Text>
</View>
);
}
return result;
}
}
const styles = StyleSheet.create({
container: {
// flex: 1,
// justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
// 改变主轴方向
flexDirection: 'row',
// 换行显示
flexWrap:'wrap',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
instructions: {
textAlign: 'center',
color: '#333333',
marginBottom: 5,
},
item: {
// 侧轴居中
alignItems:'center',
marginTop : vmargin,
backgroundColor: 'purple',
marginLeft: vmargin,
width:itemW,
// height:itemW,
},
imagesStyle:{
width : 80,
height : 80,
backgroundColor: 'green',
marginTop:10,
}
});
AppRegistry.registerComponent('helloworld', () => helloworld);
ReactNative→Image布局
最后编辑于 :
©著作权归作者所有,转载或内容合作请联系作者
- 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
- 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
- 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
推荐阅读更多精彩内容
- 1.首先熟悉Image属性 onLayout function 当元素挂载或者布局改变的时候调用,参数为:{nat...
- 图片的加载(非原文) 包括从网络、iOS(image.assets)和Android的Drawable文件夹中加载...
- 我们一般将Image定义的宽和高乘以当前运行环境的像素密度称为Image的实际宽高.当Image的实际宽、高与图片...
- 准备入门ReactNative, 写了个Image显示网络图片的 运行在iOS模拟器上,无法显示图片,2种解决方案...
- 1.简介 image组件是iOS中常用组件之一,是一个由UIImageView导出来的RN控件。那么必然就包括oc...