React Native入门教程 3 -- Flex布局

上一篇文章中介绍了基本组件的使用 React Native入门教程(笔记) 2 – 基本组件使用及样式

本节内容将继续沿用facebook官方例子介绍如何使用Flexbox布局把界面设计的多样化。
转载请注明出处：http://blog.csdn.net/wingichoy/article/details/51811866

Flexbox

Flex布局意思为弹性布局，他使用起来非常的方便。
他主要有以下几种属性

flexDirection //设置主轴方向
flexWrap //设置是否换行
justifyContent //主轴对齐方式
alignItems //交叉轴对齐方式

我们将上一篇中的布局样式修改一下，来介绍flex布局的主要属性。

1.flexDirection

可以看到Text和Image是竖直排列的，下面将其改为水平排列，只需要在style添加一行

flexDirection:'row'

即可

如图所示，要决定主轴的方向（水平、垂直），可以按照如下设置

flexDirection:'row' //主轴水平

flexDirection:'column '//主轴垂直

2.flexWrap

这个属性用于设置是否换行，默认为nowrap，即不换行，为了演示，将图片改小，添加多几个Text。

此时，添加flexWrap属性

flexWrap:'wrap',

发现已经成功换行。

如图所示，要决定是否换行，可以按照如下设置

flexWrap:'wrap' //设置换行
flexWrap:'nowrap'//设置不换行

3.justifyContent

这个属性用于视图在主轴上的对其方式，主要有如下几种

justifyContent:'flex-start' //开头对齐
justifyContent:'flex-end' //末尾对齐
justifyContent:'center'  //居中
justifyContent:'space-between' //均匀分布
justifyContent:'space-around' //每个视图两侧padding一样

顺序效果如下：

flex-start

flex-end

space-between

space-around

注意仔细区分between和around的区别。

4.alignItems

这个属性是指主轴的交叉轴的对其方式(X,Y轴对应)，主要有以下几种

alignItems: 'flex-start'  //开头对齐
alignItems: 'flex-end'    //末尾对齐
alignItems: 'center'     //居中对齐
alignItems: 'stretch'   //默认值充满整个容器

顺序效果如下：

flex-start

flex-end

center

stretch

为了区分我给text加了背景 注意其细微的区别

到此，Flex的常用属性就已经介绍完毕了，如果你想要了解更多，不妨参考这篇文章

学以致用

下面我们设计以下布局，将文字放到海报的右方。因为整体水平排列，内部垂直排列，所以我们需要多加一个容器将两个Text包裹起来（Android对比LinearLayout嵌套）。修改之后的代码如下：

class WingProject extends Component {
  render() {
    var movie = MOVIES_DATA[0];
    return (
      <View style={styles.container}>
      <Image source={{uri:movie.img}}
             style = {styles.image}
      />
      //将两个Text用新的容器包裹起来，新容器的style为rightContainer
      <View style={styles.rightContainer}>
        <Text style = {styles.title}>{movie.title}</Text>
        <Text style = {styles.title}>{movie.year}</Text>
      </View>

      </View>
    );
  }
}

style如下

const styles = StyleSheet.create({
  container: {
    flex:1,
    //主轴水平排列
    flexDirection:'row',
    //对其方式居中
    justifyContent: 'center',
    //交叉轴居中
    alignItems:'center',
    backgroundColor: '#F5FCFF',
  },
  image:{
    400,
    height:600,
  },
  title:{
    padding:5,
    fontSize:20,
  },
  rightContainer:{
    //设置右容器为竖直排列
    flexDirection:'column'
  }
});

现在界面已经如下所示了：

嗯嗯 感觉不错。今天就到这里吧。

如果你喜欢我的博客，请评论或者点击关注，谢谢！

参考文章：http://facebook.github.io/react-native/docs/sample-application-movies.html
http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html?utm_source=tuicool

下一篇： React Native入门教程 4 – 从服务器获取信息