React-Native中的布局

た入场券 2022-08-18 15:19 114阅读 0赞

title: React-Native中的布局  
date: 2015-12-21 15:11:14  
tags:

## \- React-Native ##

React-Native 使用 FlexBox布局来放置元素

> Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。  
> 任何一个容器都可以指定为Flex布局。

[Flexbox][]

alignItems enum('flex-start', 'flex-end', 'center', 'stretch')
    
    alignSelf enum('auto', 'flex-start', 'flex-end', 'center', 'stretch')
    
    flex number
    
    flexDirection enum('row', 'column')
    
    flexWrap enum('wrap', 'nowrap')
    
    justifyContent enum('flex-start', 'flex-end', 'center', 'space-between', 'space-around')

## 练习 ##

![flex][]

**一个点**

box:{
      padding:5,
      height:65,
      width:65,
      borderRadius:5,
      backgroundColor:'#ffffff',
      justifyContent: 'center',
      alignItems:'center',
      margin:10,
    },
    item:{
      borderRadius:7.5,
      height:15,
      width:15,
      backgroundColor:'#333333'
    },

**两个点**

box2:{
        padding:5,
        margin:10,
        height:65,
        width:65,
        borderRadius:5,
        backgroundColor:'#ffffff',
        flexDirection:'column',
        justifyContent: 'space-between',
        alignItems:'center',
      },

**三个点**

box3:{
        padding:5,
        margin:10,
        height:65,
        width:65,
        borderRadius:5,
        backgroundColor:'#ffffff',
        flexDirection:'column',
        justifyContent: 'space-between',
      },
      item32:{
        borderRadius:7.5,
        height:15,
        width:15,
        alignSelf:'center',
        backgroundColor:'#333333'
      },
      item33:{
        alignSelf:'flex-end',
        borderRadius:7.5,
        height:15,
        width:15,
        backgroundColor:'#333333'
      },

**四个点**

box4:{
      padding:5,
      margin:10,
      height:65,
      width:65,
      borderRadius:5,
      backgroundColor:'#ffffff',
      justifyContent: 'space-between',
      flexDirection:'row',
    },
    column41:{
      justifyContent:'space-between',
    },
    column42:{
      justifyContent:'space-between',
    },

**五个点**

column52:{
      justifyContent:'center',
    },

参考链接:  
[http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html][http_www.ruanyifeng.com_blog_2015_07_flex-grammar.html]  
[http://segmentfault.com/a/1190000002658374][http_segmentfault.com_a_1190000002658374]

> 文章出处 [http://hanks.xyz][http_hanks.xyz]

[Flexbox]: http://facebook.github.io/react-native/docs/flexbox.html#content
[flex]: https://dn-coding-net-production-pp.qbox.me/711188c5-babe-478d-989f-0bd70916c0ea.png
[http_www.ruanyifeng.com_blog_2015_07_flex-grammar.html]: http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
[http_segmentfault.com_a_1190000002658374]: http://segmentfault.com/a/1190000002658374
[http_hanks.xyz]: http://hanks.xyz