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

felix-cao / Blog

A little progress a day makes you a big success!

31 stars 4 forks source link

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

Open felix-cao opened 5 years ago

felix-cao commented 5 years ago

基础组件 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