/**
* Sample React Native App
* https://github.com/facebook/react-native
* @flow
*/
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View
} from 'react-native';
class FlexBoxDemo extends Component {
render() {
return (
<View style={styles.container}>
<Text style={{backgroundColor:'red'}}>第一个</Text>
<Text style={{backgroundColor:'green'}}>第二个</Text>
<Text style={{backgroundColor:'blue'}}>第三个</Text>
<Text style={{backgroundColor:'yellow'}}>第四个</Text>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
backgroundColor: '#F5FCFF'
}
});
AppRegistry.registerComponent('FlexBoxDemo', () => FlexBoxDemo);
1.改变主轴的方向
// 改变主轴的方向
flexDirection:'row'
从上图我们可以看出,Text组件默认宽度和高度刚好包裹文字
2.接下来我们改变主轴的对齐方式(这里主轴就是X方向)
justifyContent:'flex-end' //右对齐
// 设置主轴对齐方式
justifyContent:'center' //居中对齐
justifyContent:'space-between'
justifyContent:'space-around'
3.alignItems定义项目在交叉轴上如何对齐,可以把其想像成侧轴(垂直于主轴)的“对齐方式”
要进行这个实验,我们需要先给几个Text组件设置高度
<Text style={{backgroundColor:'red',height:30}}>第一个</Text>
<Text style={{backgroundColor:'green',height:40}}>第二个</Text>
<Text style={{backgroundColor:'blue',height:50}}>第三个</Text>
<Text style={{backgroundColor:'yellow',height:60}}>第四个</Text>
那么接下来我们设置alignItems看看
// 设置侧轴的对齐方式
alignItems:'flex-end'
4个flexItem底部对齐了。
alignItems:'center'
相对于父容器居中对齐了
另外还有:
baseline ,项目的第一行文字的基线对齐。
stretch(默认值),如果项目未设置高度或设为auto,将占满整个容器的高度。
就不一一赘述了。
4.flexWrap换行
第四个宽度超出了,第一行不够显示,我们来看一下代码:
/**
* Sample React Native App
* https://github.com/facebook/react-native
* @flow
*/
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View
} from 'react-native';
class FlexBoxDemo extends Component {
render() {
return (
<View style={styles.container}>
<Text style={{backgroundColor:'red',width:80}}>第一个</Text>
<Text style={{backgroundColor:'green',width:90}}>第二个</Text>
<Text style={{backgroundColor:'blue',width:100}}>第三个</Text>
<Text style={{backgroundColor:'yellow',width:110}}>第四个</Text>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
backgroundColor: '#F5FCFF',
// 上边距
marginTop:20,
// 改变主轴的方向
flexDirection:'row',
// 设置主轴对齐方式
justifyContent:'flex-start',
// 设置侧轴的对齐方式
alignItems:'center',
// 一行显示不下,换一行
flexWrap:'wrap'
}
});
AppRegistry.registerComponent('FlexBoxDemo', () => FlexBoxDemo);
元素属性
我们前面学的几个都是容器属性,下面我们来看看元素属性。
1.flex
<Text style={{backgroundColor:'red',flex:1}}>第一个</Text>
<Text style={{backgroundColor:'green'}}>第二个</Text>
<Text style={{backgroundColor:'blue'}}>第三个</Text>
<Text style={{backgroundColor:'yellow'}}>第四个</Text>
分析:第一个设置了flex:1
,最后的效果是第二三四个按照自己文字内容的宽度,剩下的宽度全部给了第一个。
那么我们给第一个,第二个都设置flex:1
会怎么样呢?
第三四个根据自己的文字内容计算宽度后,剩下的屏幕宽度被第一个和第二个平分了。
我们修改成这样看看最后是什么效果:
<Text style={{backgroundColor:'red',flex:1}}>第一个</Text>
<Text style={{backgroundColor:'green',flex:2}}>第二个</Text>
<Text style={{backgroundColor:'blue',flex:2}}>第三个</Text>
<Text style={{backgroundColor:'yellow',flex:1}}>第四个</Text>
结果是不是和你想的一样?从代码我们也可以看出:宽度被分成了6份,第二和第三是另外的2倍。
2.alignSelf
align-self属性允许单个项目有与其他项目不一样的对齐方式,可覆盖align-items属性。默认值为auto,表示继承父元素的align-items属性,如果没有父元素,则等同于stretch。
/**
* Sample React Native App
* https://github.com/facebook/react-native
* @flow
*/
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View
} from 'react-native';
class FlexBoxDemo extends Component {
render() {
return (
<View style={styles.container}>
<Text style={{backgroundColor:'red',flex:1,height:60,alignSelf:'flex-end'}}>第一个</Text>
<Text style={{backgroundColor:'green',flex:2,height:70}}>第二个</Text>
<Text style={{backgroundColor:'blue',flex:2, height:80}}>第三个</Text>
<Text style={{backgroundColor:'yellow',flex:1, height:90}}>第四个</Text>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
backgroundColor: '#F5FCFF',
// 上边距
marginTop:20,
// 改变主轴的方向
flexDirection:'row',
// 设置主轴对齐方式
justifyContent:'flex-start',
// 设置侧轴的对齐方式
alignItems:'center',
// 一行显示不下,换一行
flexWrap:'wrap'
}
});
AppRegistry.registerComponent('FlexBoxDemo', () => FlexBoxDemo);
从上图我们可以看出:第一个Text遵守了它自己的alignSelf:'flex-end'
地对齐了,其他3个都是居中对齐。
alignSelf属性的值有如下几个:auto | flex-start | flex-end | center | baseline | stretch
四、获取当前屏幕的宽度、高度、分辨率
/**
* Sample React Native App
* https://github.com/facebook/react-native
* @flow
*/
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View
} from 'react-native';
// 引入系统的Dimensions类库
var Dimensions = require('Dimensions');
class FlexBoxDemo extends Component {
render() {
return (
<View style={styles.container}>
<Text>当前屏幕的width是:{Dimensions.get('window').width}</Text>
<Text>当前屏幕的height是:{Dimensions.get('window').height}</Text>
<Text>当前屏幕的scale是:{Dimensions.get('window').scale}</Text>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
backgroundColor: '#F5FCFF',
// 上边距
marginTop:20,
// 设置主轴对齐方式
justifyContent:'center',
// 设置侧轴的对齐方式
alignItems:'center'
}
});
AppRegistry.registerComponent('FlexBoxDemo', () => FlexBoxDemo);
注意需要引入Dimensions类库
var Dimensions = require('Dimensions');