/**
* 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';
export default class zuojinminrea
extends Component {
//初始化方法 返回组件
render() {
return (
<View style={styles.container}
>
<Text style={{
backgroundColor:
'red',height:
30,width:
100}}
>text111
</Text>
<Text style={{
backgroundColor:
'orange',height:
40,width:
100,alignSelf:
'flex-start'}}
>text222
</Text>
<Text style={{
backgroundColor:
'gray',height:
50,width:
120}}
>text333
</Text>
<Text style={{
backgroundColor:
'blue',height:
60,width:
130}}
>text4445555
</Text>
</View>
)
;
}
}
const styles = StyleSheet.create({
container: {
// flex: 1,//铺满
backgroundColor:
'pink',
//row 横向 column纵向
flexDirection :
'row',
//上边距
marginTop:
100,
//设置主轴对齐方式
justifyContent:
'space-around',
//侧轴对齐
alignItems:
'center',
flexWrap:
'wrap',
}
,
})
;
/**---------------实例2--------------------**/
class zuojinminrea1
extends Component {
//初始化方法 返回组件
render() {
return (
<View style={styles1.
container}
>
<Text style={{
backgroundColor:
'red',height:
30,width:
30}}
>text111
</Text>
<Text style={{
backgroundColor:
'orange',height:
40,width:
40,alignSelf:
'flex-start'}}
>text222
</Text>
<Text style={{
backgroundColor:
'gray',height:
50,width:
50}}
>text333
</Text>
<Text style={{
backgroundColor:
'blue',height:
60,width:
60}}
>text4445555
</Text>
</View>
)
;
}
}
const styles1 = StyleSheet.create({
container:{
backgroundColor:
'pink',
//row 横向 column纵向
flexDirection :
'column',
//上边距
marginTop:
100,
//设置主轴对齐方式
justifyContent:
'space-around',
//侧轴对齐
alignItems:
'center',
flexWrap:
'wrap'
}
,
})
;
/**---------------实例2--------------------**/
var Screen =
require(
'Dimensions')
var viewH = Screen.get(
'window').height
var viewW = Screen.get(
'window').width
class zuojinminrea2
extends Component {
//初始化方法 返回组件
render() {
return (
<View style={styles2.
container}
>
<Text style={{
height:viewH/
7,width:viewW/
5,backgroundColor:
'gray'}}
>屏幕高度===={viewH}{Screen.get(
'window').height}
</Text>
<Text style={{
height:viewH/
8,width:viewW/
4,backgroundColor:
'red'}}
>屏幕宽度===={Screen.get(
'window').width}
</Text>
<Text style={{
height:viewH/
9,width:viewW/
6,backgroundColor:
'orange'}}
>屏幕宽度11111===={Screen.get(
'window').width}
</Text>
<Image source={
require(
'./img/baobao.jpg')}
style={{
height:
260,width:
260,resizeMode:Image.resizeMode.
contain}}
>
<Text>宋宝宝
</Text>
</Image>
{
/* cover 图片居中显示 stretch 图片拉伸变xing contain//等比例 */}
<Image style={{
height:
100,width:
100,resizeMode:Image.resizeMode.
contain}}
source={{
uri:
'http://avatar.csdn.net/6/F/B/1_zuojinmin.jpg'}}
>
<Text style={{
marginTop:
20,backgroundColor:
'transparent'}}
>dasda
</Text>
</Image>
</View>
)
;
}
}
const styles2 = StyleSheet.create({
container:{
// flex :1,
height:viewH
,
backgroundColor:
'pink',
//row 横向 column纵向
flexDirection :
'column',
//上边距
marginTop:
20,
//设置主轴对齐方式
justifyContent:
'space-around',
//侧轴对齐
alignItems:
'center',
// flexWrap:'wrap'
}
,
})
;
AppRegistry.
registerComponent(
'zuojinminrea', () => zuojinminrea2)
;
