React Native 响应式布局实践

文章预览

【导语】React Native 的样式和布局部分采用了前端布局上所使用 CSS 的子集。利用 CSS 里的 Flexbox 进行布局和原生平台的布局方式有比较大的区别。本文集中讲解 Flexbox 的原理，以及 Platform、Dimensions API的用法。并结合具体例子，介绍如何具体实现跨平台响应式的布局。 和原生的 iOS 以及 Android 的开发方式不同，React Native 的布局采用了 Web 前端布局所常用的 Flexbox 模型。这个模型的特点在于能够在按照固定尺寸布局之后，灵活地分配屏幕上的剩余空间，利用这个模型可以轻松实现许多应用中所需要的布局设计。 开发人员掌握了 Flexbox 模型即可随心所欲地对屏幕上的 UI 元素进行布局，再结合 React Native 所提供的获取屏幕信息、平台信息 ………………………………