第三节 实现页面布局

标签：

# 目标：
为导航区设置高度，将标题在导航区居中显示。
#知识点：
1、理解View在布局中的作用
2、调整颜色、字体、边框等属性
3、理解padding
4、理解Flex的位置和方向

#1. 创建容器：容纳整个屏幕
这里，将样式直接写在jsx中，这种做法可行，但不是习惯性做法。

[{backgroundColor:‘red‘},
{flexDirection: ‘column‘},
{flex:1}]
设置方向为column，flex为1，背景色为红。


return (
<View style={[{backgroundColor:‘blue‘},
{flexDirection: ‘column‘},{flex:1}]}>
<Text style={[{}]}>
写笔记
</Text>
</View>
);
这种情况下，View占据全部高度。
默认情况下，本来就占据全部宽度。
因此容器类不需要获取屏幕的高度和宽度。

#2. 样式修改为使用StyleSheet

首先我们要导入StyleSheet，然后创建一个StyleSheet对象：
var styles = StyleSheet.create({
container:{
flexDirection: ‘column‘,
flex:1,
backgroundColor:‘#ef553a‘,
paddingTop:10,
paddingBottom:20,
paddingLeft:20,
paddingRight:20,
borderRadius:10
},
nav:{

},
editor:{
}
});

然后组件中简单的赋值即可：
<View style={styles.container}>

这有点象css的意思，同时注意大括号，jsx里所有js内容都要用大括号。

#3. 创建导航区、编辑区：固定高度

前面我们只有一个视图，这里，我们将其划分为导航区和编辑区，两者在一个视图中。
这里，container视图应改为column方向，这样上下排列导航区和编辑区
其中：导航区先写，显示在上面，高度设为80
编辑区后写，因此显示在下方，设为Flex:1，由于没有其它同级的项，就占据了剩下来的所有高度。
这也说明：固定的高度和Flex是可以并用的。
我们以不同的背景色显示，可以看到三个不同的视图。
组件：

<View style={styles.container}>
<View style={styles.nav}>
<Text style={styles.title}>
写笔记
</Text>
</View>

<View style={styles.editor}>
</View>

</View>

样式：
const styles = StyleSheet.create({
container:{
flexDirection: ‘column‘,
flex:1,
backgroundColor:‘#ef553a‘,
paddingTop:10,
paddingBottom:20,
paddingLeft:20,
paddingRight:20,
borderRadius:10
},
nav:{
height:80,
flexDirection:‘row‘,
backgroundColor:‘red‘,
},
editor:{
flexDirection:‘row‘,
flex:1,
backgroundColor:‘green‘,
},

#4.注意运行后的显示结果：
容器上边被固定高度的导航区覆盖，下边填满编辑区。
容器的背景色，留下来的空白，就是上面padding定义的数值，可以看到根据我们的设置，四边留空不同。
padding：定义容器内部，上下左右留出的边空。

第三节 实现页面布局

标签：

原文地址：http://www.cnblogs.com/biqian/p/5274117.html