React Native 0.23 iOS: 体验灵活的flexbox布局UI_html/css

React Native 0.23 iOS: 体验灵活的flexbox布局UI_html/css_WEB-ITnose

WBOY

Release： 2016-06-21 08:51:23

Original

1311 people have browsed it

React Native使用CSS3中的 flexbox 做布局，比如我们实现这样一个简单布局界面。

如下图（纵向）：

横向：

布局逻辑是这样的：

3行，第一行高度固定50pt，第二行占剩余空间的四分之三，第三行占剩余空间的四分之一。
在第二行中，又包含3列元素，每一列元素各占三分之一的空间，并且根据内容水平居中。在垂直排版上，第一列向下对其，第二列居中，第三列拉伸。

Component代码：

class FlexboxLayout extends Component {    render() {        return (            <View style={styles.container}>                <View style={styles.row1}></View>                <View style={styles.row2}>                    <Text style={styles.cell1}>1</Text>                    <Text style={styles.cell2}>2</Text>                    <Text style={styles.cell3}>3</Text>                </View>                <View style={styles.row3}></View>            </View>        );    }}

Copy after login

主要工作在Style设置上，一些实现上需要注意的地方，首先3行的实现上，如果是固定高度，只需要设置 height 即可，值是数字，代表iOS中的点，如果是比例，则需要设置 flex 值，按照上面的样子，第二行占四分之三， flex 值是3，第三行占四分之一， flex 值是1.

接着是第二行中三列View的实现，React Native中 flexDirection 默认是 column 即纵向排列，所以这里需要手动设置 flexDirection 为 row ，这样才会横向排列。然后三列会横向居中，这个要设置 justifyContent 为 space-around ， justifyContent 实际上对应CSS3中flexbox里的 justify-content 属性，具体的flexbox属性以及其效果建议看参考 CSS-Tricks 。

样式代码：

const styles = StyleSheet.create({    container: {        flex: 1,    },    row1: {        height: 50,        backgroundColor: '#09A9DE'    },    row2: {        flex: 3,        backgroundColor: '#09DE53',        flexDirection: 'row',        justifyContent: 'space-around',        alignItems: 'center'    },    row3: {        flex: 1,        backgroundColor: '#DEDE09'    },    cell1: {        backgroundColor: '#BDBDBD',        padding: 20,        alignSelf: 'flex-end'    },    cell2: {        backgroundColor: '#BDBDBD',        padding: 20    },    cell3: {        backgroundColor: '#BDBDBD',        padding: 20,        alignSelf: 'stretch'    }});

Copy after login

最后对于每列纵向的对其，可以设置父View的 alignItems 属性，可以把这个值当做排列时的默认值，我们这里设置为 center ，这样三列都会默认纵向居中，而上图中的实现，第一列和第三列分别是下对其和拉伸，和默认值是不一样的，这样的话，可以通过手动设置子View的 alignSelf 属性，所以第一列的 alignSelf 值是 flex-end ，第三列的 alignSelf 值是 stretch .

最后，个人觉得，暂且不去比较整个React Native和原生Native（这个话题太大），只去比较这个flexbox布局和目前iOS开发的Autolayout布局，前者可以说是更优于后者的。事实上，在实际使用Autolayout中确实会遇到很多问题，比如一些比较复杂的页面在Xcode Interface Builder中编辑或者去阅读其他人的Autolayout约束会显得比较困难，再比如在代码中使用Autolayout时，不同团队可能会选择不同的Autolayout代码框架，这也会造成一定麻烦。