页面结构:
<View style={styles.wrap}>
<View style={styles.left}>
<Text style={styles.text}>
这是左侧栏{'n'}
这是左侧栏{'n'}
这是左侧栏{'n'}
这是左侧栏{'n'}
</Text>
</View>
<View style={styles.right}>
<Text style={styles.text}>
这是右侧栏{'n'}
这是右侧栏{'n'}
这是右侧栏{'n'}
这是右侧栏{'n'}
</Text>
</View>
</View>
左中右布局
左右定宽,中间占满。
样式表:
wrap {
flex:1;
flex-direction: row;
background-color: yellow;
}
left{
width: 80;
background-color: #64BA9D;
}
centent{
flex:1;
background-color: #a9ea00;
}
right{
width: 80;
background-color: #008E59;
}
text{
padding:10;
font-size:16;
color:#EEEEEE;
line-height:20;
text-align: center;
}
页面结构:
<View style={styles.wrap}>
<View style={styles.left}>
<Text style={styles.text}>
这是左侧栏{'n'}
这是左侧栏{'n'}
这是左侧栏{'n'}
这是左侧栏{'n'}
</Text>
</View>
<View style={styles.centent}>
<Text style={styles.text}>
这是内容区{'n'}
这是内容区{'n'}
这是内容区{'n'}
这是内容区{'n'}
</Text>
</View>
<View style={styles.right}>
<Text style={styles.text}>
这是右侧栏{'n'}
这是右侧栏{'n'}
这是右侧栏{'n'}
这是右侧栏{'n'}
</Text>
</View>
</View>











