#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：定义容器内部，上下左右留出的边空。