首页 > 其他 > 详细

ReactNative学习笔记1 Flexbox布局

时间:2016-03-28 16:46:47      阅读:158      评论:0      收藏:0      [点我收藏+]

一、比例属性flex和布局方向属性flexDirection

例如三个视图的flex属性值分别为2、4、8,则它们的高度比例为2:4:8。,宽度不指定,默认为全屏的宽度。

class ZLFReactNativeDemo extends Component {
  render() {
    return (
      <View style={styles.container}>
        <View style={styles.style1}></View>
        <View style={styles.style2}></View>
        <View style={styles.style3}></View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
   flexDirection: column, backgroundColor:
‘#00FFFF‘, }, style1: { flex: 2, backgroundColor: ‘red‘, }, style2: { flex: 4, backgroundColor: ‘blue‘, }, style3: { flex: 8, backgroundColor: ‘green‘, }, });

技术分享   技术分享

如果要改为横向布局,则只需改父视图的属性flexDirection为row

二、对齐方式属性alignSelf

alignSelf主要有flex-start(对于纵向布局来说是居上,对于横向布局是居左)、 flex-end(对于纵向布局来说是居下,对于横向布局是居右)、 center(居中)、  auto(自由)、 stretch(铺满)几种对齐方式。

三、justifyContent和alignItems

alignItems是水平居中,justifyContent是垂直居中,这两者跟其他属性不同的是,它们是约束子视图的。

 



ReactNative学习笔记1 Flexbox布局

原文:http://www.cnblogs.com/zhanglinfeng/p/5329450.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!