混合开发的大趋势之一React Native Height and Width (尺寸)，Flexbox(位置关系)

转载请注明出处：王亟亟的大牛之路

上一篇讲了State (状态)，Style（样式）：http://blog.csdn.net/ddwhan0123/article/details/52240463

这一篇我们讲位置与尺寸，这些都捯饬好我们就可以搭完整的界面啦！！！

继续安利下我的收纳库，包你满意:https://github.com/ddwhan0123/Useful-Open-Source-Android

废话不说，继续学习

素材源于：https://facebook.github.io/react-native/docs/flexbox.html

Height and Width

先讲简单的长宽

在安卓里我们用 dp sp 等等等来设置控件的大小（这里的大小是长+宽，本身就是个“方”的，iOS的PX同理）

而在RN，也是同样，在style里设置width和height属性就行了，区别就是 不需要单位，不需要单位，不需要单位重要的事情说三次，他不需要我们给出像素点大小，他有自己的一个对屏幕适配的换算，做过WEB前端的很能理解这一概念（省事了，适配的事少了不少）

使用起来很简单，像这样

<View style={{width: 50, height: 50, backgroundColor: ‘powderblue‘}} />

这个View是一个 50长 50宽 powderblue颜色的方块

当一个控件的样式里有flex属性之后他就是一个可以伸缩挤压伸展的控件了。

当 flex:1的时候他会充满所有的空闲区域，如果一个试图组里面有多个flex:1的子控件，那么他们会平分这个试图组。

但是如果有一个大于其他诸如

2 ：1

1 : 10

什么的，那么就会按照比值大小来分配尺寸,诸如安卓的 Layout_weight

Layout with Flexbox

flexbox规则来指定某个组件的子元素的布局,官方提供了3种属性来帮我们完成我们的布局工作，分别是 flexDirection、alignItems和 justifyContent。

flexDirection

类似于安卓的相对布局，默认为 垂直向（column）,也可以设置为，水平向(row).

我们来整个例子看看

还是之前的生成的项目，修改下return括号内的代码。

import React, { Component } from ‘react‘;
import { AppRegistry,Text,View } from ‘react-native‘;

class RNLearnPro extends Component {
  render() {

    return(
    <View style={{flex:1 ,flexDirection :‘column‘}}>
        <View style={{width :50,height :50, backgroundColor: ‘#aa1122‘}} />
        <View style={{width :50,height :50, backgroundColor: ‘#bbaa22‘}} />
        <View style={{width :50,height :50, backgroundColor: ‘#c1cc22‘}} />
    </View>
    );
  }
}

AppRegistry.registerComponent(‘RNLearnPro‘, () => RNLearnPro);

效果：

那再换row模式下

只需要替换 <View style={{flex:1 ,flexDirection :‘row‘}}>

Justify Content

类似于 安卓的相对布局里控制位置关系的 “居中，水平居中，垂直居中”等，我们来一个个看他们的实现效果

核心代码修改如下

  <View style={{
          flex: 1,
          flexDirection: ‘column‘,
          justifyContent: ‘center‘,
        }}>
        <View style={{width :50,height :50, backgroundColor: ‘#aa1122‘}} />
        <View style={{width :50,height :50, backgroundColor: ‘#bbaa22‘}} />
        <View style={{width :50,height :50, backgroundColor: ‘#c1cc22‘}} />
    </View>

flex-start 模式：(默认值)

默认样式同样的效果，子控件相互紧挨着沿着左上方排列

center模式：

控件位于Height位置的正中间，靠左对齐

flex-end模式：

控件位于Height位置的最下面，靠左对齐

space-around模式：

子控件会均匀地分布在父容器里，左对齐.

space-between模式：

子控件会均匀地分布在父容器里，左对齐,第一个项顶top,最后项顶Bottom.

Align Items

这是一个和Justify Content相对应的属性，在flexDirection :‘column‘ 的大环境下 Justify Content使得我们的子控件都是左对齐 也就是操控的都是 Y向的位置，而X向就由Align Items来处理。

在二维的屏幕概念里，X,Y坐标同时出现就能使“直线变成点”。

我们看下在Y向默认时，X向发生变化对UI有什么影响

flex-start模式：(默认时)

左上角对齐

center模式：

X 居中，Y最上方

flex-end模式：

Y轴还是最上方，X轴最右

stretch模式：

这是一个最特别的模式，也就是和安卓的match_parent模式类似，前提是控件的宽必须没有固定尺寸，不然将失去效果，像例子的2个黄色View那样

  <View style={{
          flex: 1,
          flexDirection: ‘column‘,
          alignItems: ‘stretch‘,
        }}>
        <View style={{height :50, backgroundColor: ‘#aa1122‘}} />
        <View style={{width :50,height :50, backgroundColor: ‘#bbaa22‘}} />
        <View style={{width :50,height :50, backgroundColor: ‘#c1cc22‘}} />
    </View>