1、UI布局
- 一个好的程序,给用户第一印象不是功能多棒,性能多好,而是“颜值”
- 就好比你找对象,往往第一被对方吸引的是颜值
- 所以UI布局学好了,就更加容易获得用户的青睐
2、相关属性
- 感慨:英文不是很好,学起来还是比较费力的,根据翻译,对属性都给了中文解释,更容易理解和记忆。
1. flexDirection:
单词flex的意思: 活动
flexDirection: 活动方向,默认为列
可以写的值为: ‘row’ , ‘column’
import React from 'react';
import {
Button,
StyleSheet,
SafeAreaView,
View,
FlatList,
Dimensions,
Text
} from 'react-native';
const screen = Dimensions.get('window');
const smallView = (name) => {
return(
<View style = {styles.smallViewStyle}>
<Text>{name}</Text>
</View>
)
}
const myLayout = () => {
return(
<View style = {styles.testAlignContent}>
{smallView("第一个")}
{smallView("第二个")}
{smallView("第三个")}
</View>
)
}
export default myLayout;
const styles = StyleSheet.create({
testAlignContent: {
flexDirection: 'row',
margin: 30,
backgroundColor: '#f5f5f5',
borderWidth: 2,
borderRadius: 10,
height: 300,
},
smallViewStyle: {
backgroundColor: 'green',
borderWidth: 2,
borderColor: 'blue',
height: 40,
width: 80
},
})
注意:设置 flexDirection: ‘row’,效果如下
注意:设置 flexDirection: ‘column’, 或者不设置这个字段,效果如下
2. justifyContent:
(1)justify:为…辩解(或辩护)
(2)那么作为编程角度,justifyContent我们可以理解为:给当前内容进行描述。
(3)能够请得起律师辩护,那就是主人了。当flexDirection是row的时候,那么主轴就是row;反之,就是column
3. alignItems:
(1)一般来说,经常会这两个属性一起用到,相对justifContent主人来说,alignItems就是仆人了
(2)所以说,当justifyContent修饰的row,那么alignItems修饰的就是column;
(3)当justifyContent修饰的column,那么alignItems修饰的就是row;
justifyContent 可以选择的值:
flex-start’, ‘flex-end’, ‘center’, :这3个很容易理解了
’space-between’, :除了两边,中间的距离均匀
’space-around’,:中间间距都为D,但是两边间距为D/2
’space-evenly’: 包括两边,所有间距均匀
alignItems可以选择的值:
‘flex-start’, ‘flex-end’, ‘center’,
‘stretch’, :拉伸填充(前提是不能设置死对应的固定长度,否则无效)
‘baseline’:基准线
- 当设置
alignItems: 'stretch', // 侧轴 // 这里设置为拉伸
,不设置高度
testAlignContent: {
flexDirection: 'row',
justifyContent: 'space-between', // 主轴
alignItems: 'stretch', // 侧轴 // 这里设置为拉伸
margin: 30,
backgroundColor: '#f5f5f5',
borderWidth: 2,
borderRadius: 10,
height: 300,
},
smallViewStyle: {
backgroundColor: 'green',
borderWidth: 2,
borderColor: 'blue',
// height: 40, // 高度去了
width: 80,
marginTop: 0 // 距离父控件顶部为0
},
效果如下:
- 当设置
alignItems: 'baseline', // 侧轴
, marginTop: 20 // 距离父控件顶部为20
,效果如下:- 说明:子控件的高度是被Text撑起来的高度,因为这里把子控件的高度取消了
- 到此,我们可以布局一部分UI了。
4.alignContent,alignSelf
(1)alignContent 和 alignItems 也是容易混淆的概念
(2)那么在justifyContent、alignContent、alignItems、alignSelf这几个怎么区分呢?
(3)如下描述:
justifyContent:权力最大,想象成主人,统管全局
alignContent:主人的管家,只能管理所有的仆人,只会对多行仆人去管,一行仆人懒得去管理,官架子比较大哈!
alignItems:复数形式,小组长,只能管理一行。
alignSelf: 小喽啰,只能管理自己,管理自己相对父控件的侧轴位置。胆战心惊的小喽啰,父控件的主轴是row的时候,自己只能控制在column的位置。不敢在主人的眼皮底下有任何小动作。瑟瑟发抖的小喽啰。可怜,惨!(一般情况下,所有控件默认的主轴都column)
import React from 'react';
import {
Button,
StyleSheet,
SafeAreaView,
View,
FlatList,
Dimensions,
Text
} from 'react-native';
const screen = Dimensions.get('window');
const smallView = (name) => {
/*
<Text style = {{alignSelf: 'center'}}>{name}</Text>
瑟瑟发抖的小喽啰,控制自己在父控件的次轴row方向居中
*/
return(
<View style = {styles.smallViewStyle}>
<Text style = {{alignSelf: 'center'}}>{name}</Text>
</View>
)
}
const myLayout = () => {
return(
<View style = {styles.testAlignContent}>
{smallView("第一个")}
{smallView("第二个")}
{smallView("第三个")}
{smallView("第一个")}
{smallView("第二个")}
{smallView("第三个")}
{smallView("第一个")}
{smallView("第二个")}
{smallView("第三个")}
{smallView("第一个")}
{smallView("第二个")}
{smallView("第三个")}
</View>
)
}
export default myLayout;
const styles = StyleSheet.create({
testAlignContent: {
flexDirection: 'row',
flexWrap: 'wrap',
alignContent: 'flex-start', // 大管家:官架子比较大,单行不管,多行才管
justifyContent: 'space-between', // 主人:控制 主轴的方向
alignItems: 'baseline', // 侧轴 // 小组长:权力有限,单行有效,多行无效
alignSelf: 'center', // 人外有人,相对自己的父控件,自己也是小喽啰,只能控制自己在父控件的次轴方向:居中
backgroundColor: '#f5f5f5',
borderWidth: 2,
borderRadius: 10,
height: 400,
width: 200,
},
smallViewStyle: {
backgroundColor: 'green',
borderWidth: 2,
borderColor: 'blue',
height: 40,
width: 80,
marginTop: 20,
justifyContent:'center' // 控制smallView的主轴column方向居中
},
})
效果图:
5、margin、padding
- 控制顺序,从上开始,上、右、下、左
即:从上面开始,顺时针转动方向
- margin 对外的距离设置
- padding 对内的距离设置