React Native(一) FlexBox布局
在React Native中主要使用FlexBox来布局。 安装过React Native的开发环境的就知道,在index.android.js/index.ios.js的文件内容如下: export default class TemplateDemo extends Component {
render() {
return (
<View style={styles.container}>
<Text style={styles.welcome}>
Welcome to React Native!
</Text>
<Text style={styles.instructions}>
To get started,edit index.ios.js
</Text>
<Text style={styles.instructions}>
Press Cmd+R to reload,{'n'}
Cmd+D or shake for dev menu
</Text>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,justifyContent: 'center',alignItems: 'center',backgroundColor: '#F5FCFF',},welcome: {
fontSize: 20,textAlign: 'center',margin: 10,instructions: {
textAlign: 'center',color: '#333333',marginBottom: 5,});
上面的: <View style={styles.container}>
<Text style={styles.welcome}>
Welcome to React Native!
</Text>
<Text style={styles.instructions}>
To get started,edit index.ios.js
</Text>
<Text style={styles.instructions}>
Press Cmd+R to reload,{'n'}
Cmd+D or shake for dev menu
</View>
就像Android里面的布局一样,其中style是对view如何显示进行定义。 下面我们来看看flexbox的一些属性。 一、容器属性1、flexDirection :容器内的元素的排列方式[主轴方向],可取值
2、justifyContent 属性justifyContent 属性 指定容器内的元素在主轴线的对齐方式,可取值
3、alignItems属性alignItems: 侧轴(垂直于主轴)的“对齐方式”。 flex-end:交叉轴的终点对齐 。 效果如下所示: center:交叉轴的中点对齐。 效果如下所示: stretch(默认值):如果项目未设置高度或设为auto,将占满整个容器的高度。我们先把第一个View的height属性注释掉,然后把alignItems设置为stretch,效果如下: 4、flexWrap: 默认情况下,项目都排在一条线(又称”轴线”)上。flex-wrap属性定义,如果一条轴线排不下,如何换行。nowrap(默认值):不换行。 效果如下: wrap: 换行,第一行在上方。 效果如下: wrap-reverse:换行,第一行在下方。【react Native不支持此属性值】 二、元素属性1、flex属性flex属性是“flex-grow”、“flex-shrink”和“flex-basis”三个属性的缩写, 2、alignSelf属性 设置为alignSelf:’flex-end’ 效果如下: 设置为alignSelf:’center’ 效果如下: 设置为alignSelf:’stretch’ 且不设置高度,效果如下: 三、几个简单的示例1,绝对定位和相对定位: 通常情况下设置position:’relative’,和不设置position属性,定位的效果是一样的 如果View设置了position: ‘absolute’,那么该View或父View设置padding对该View都无效: 2,获取宽高分辨率 3,默认宽度问题 四、本博客所有代码展示:import React,{Component} from 'react';
import {
AppRegistry,StyleSheet,Text,View
} from 'react-native';
//330 375 = 45 15+30
var {width,scale} = require('Dimensions').get('window');
export default class FlexBoxDemo extends Component {
render() {
return (
<View style={styles.container}>
<Text style={styles.text_style1}>{width}</Text>
<Text style={styles.text_style2}/>
<Text style={styles.text_style3}/>
<Text style={styles.text_style4}/>
<Text style={styles.text_style5}/>
<Text style={styles.text_style6}/>
</View>
);
}
}
class PositionDemo extends Component {
render() {
return (
<View style={{backgroundColor: '#F5FCFF',height: 200,paddingTop: 30,paddingBottom:100,flexDirection:'column'}}>
<Text style={styles.positionStyle}/>
<Text style={{backgroundColor:'gray'}}>width x height={width} x {height}; scale:{scale}</Text>
{/*默认占一行 <Text style={{backgroundColor:'blue'}}/>*/}
</View>
);
}
}
const styles = StyleSheet.create({
container: {
//flex: 1,
backgroundColor: '#F5FCFF',flexDirection: 'row',marginTop: 30,justifyContent: 'flex-start',alignItems: 'stretch',flexWrap: 'wrap',text_style1: {
width: 40,height: 50,backgroundColor: '#9900ff',//flex: 1,
//textAlign: 'center',//文字仅仅水平居中
},text_style2: {
width: 40,height: 60,backgroundColor: '#99ee00',//flex: 2,
// alignSelf: 'stretch'
},text_style3: {
width: 80,height: 30,backgroundColor: '#ff9900',//flex: 3,
},text_style4: {
width: 50,height: 70,backgroundColor: '#99ff00',
},text_style5: {
width: 90,text_style6: {
width: 80,positionStyle: {
//flex:1,
height: 50,width: 100,backgroundColor: 'black',position: 'absolute',//absolute
bottom: 20,left: 120,//paddingBottom: 40,//如果position:'absolute',则paddingBottom:40无效
//通常情况下设置position和absolute,定位的效果是一样的,
//但是如果父组件设置了内边距,position会做出相应的定位改变,而absolute则不会。
}
});
AppRegistry.registerComponent('FlexBoxDemo',() => PositionDemo);
(编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |