欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

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

程序员文章站 2022-05-11 10:02:28
...
React Native使用CSS3中的 flexbox 做布局,比如我们实现这样一个简单布局界面。

如下图(纵向):

横向:

布局逻辑是这样的:

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

Component代码:

class FlexboxLayout extends Component {    render() {        return (            123        );    }}

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