当前位置:Gxlcms > html代码 > ReactNative0.23iOS:体验灵活的flexbox布局UI_html/css_WEB-ITnose

ReactNative0.23iOS:体验灵活的flexbox布局UI_html/css_WEB-ITnose

时间:2021-07-01 10:21:17 帮助过:2人阅读

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

如下图(纵向):

横向:

布局逻辑是这样的:

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

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代码框架,这也会造成一定麻烦。

人气教程排行