React-Native Primary Flex布局

React-Native 2017-03

RN组件属性

对于flex布局，可以详细参看Flex 布局教程：实例篇，下面给出概览，以供快速查询。

Flex布局实例

下面给出如图所示的示例，这个简单的布局如何写？

针对布局，我们一般的思路：

• 最外层容器定义（定义内层容器的布局方向等）
• 内层容器定义
• Item组件定义

按照上面的思路，可以很容易写出布局

const styles = StyleSheet.create({
    /**
     * 最外层容器，定义内层容器的布局方向，这里是横向
     */
    container: {
        flex: 1, flexDirection: 'row', justifyContent: 'center', alignItems: 'center', backgroundColor: '#F5FCFF'
    },
    /**
     * 内层容器，左边容器，flex：1 和Android的weight相似
     */
    leftContainer: {
        flex: 1
    },
    /**
     * 内层容器，中间容器，flex：1 和Android的weight相似
     */
    middleContainer: {
        flex: 1
    },
    /**
     * 内层容器，右边容器，flex：1 和Android的weight相似
     */
    rightContainer: {
        flex: 1
    },
    /**
     * Item,海报图布局定义
     */
    thumbnail: {
        alignItems: 'center',
        width: 100,
        height: 80,
        marginLeft: 5,
        marginRight: 5,
    },
    /**
     * Item,电影名称布局定义
     */
    title: {
        fontSize: 20, marginBottom: 8, textAlign: 'center'
    },
    /**
     * Item,上映年份布局定义
     */
    year: {
        fontSize: 18,
        textAlign: 'center'
    },
});

参考：
Flex 布局教程：语法篇
Flex 布局教程：实例篇