React Native 入门 --- View 组件和 flexbox 布局

[felix-cao]

基础组件 View, Text

View 组件

• View 组件是最基本的组件，是第一个需要掌握的组件
• View 其作用等同于 iOS 中的 UIView, Android 中的 android.view，或是网页中的 <div> 标签，
• React Native 绝大部分的组件都是继承了 View 组件的属性, View 是所有组件的父组件。
• View 组件是一个支持 Flexbox 布局、样式、一些触摸事件处理的容器。

ps View From React Native DOC

Flexbox 布局

• 轴和容器是 flex 布局的核心概念
• 轴分为主轴(main axis)和从轴(cross axis)

轴

• 主轴的方向由 flex-direction 确定，row、column、row-reverse、column-reverse
• 主轴逆时针旋转90度就是从轴的方向
• 轴的起始端用 flex-start 表示， 末尾端用 flex-end 表示

容器

• 容器分为父容器(container)和子容器(item)
• 父容器可以统一设置子容器的排列方式，子容器也可以单独设置自身的排列方式，如果两者同时设置，以子容器的设置为准。
• 在父容器中统一设置子容器沿主轴排列 justify-content ：flex-start,flex-end, center, space-between, space-around
• 在父容器中统一设置子容器如何沿交叉轴排列 align-items ： flex-start,flex-end, center, baseline, stretch
• 子容器沿主轴方向都具有伸缩弹性，会自动填充剩余空间，子容器的伸缩比例由 flex 属性确定
• 单独设置子容器如何沿交叉轴排列：align-self