ReactNative0.23iOS:体验灵活的flexbox布局UI_html/css

如下图（纵向）：

横向：

布局逻辑是这样的：

Component代码：

class FlexboxLayout extends Component { render() { return (    1 2 3    ); }}

主要工作在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' }});

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

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