Flexbox 基础
Flexbox 是一种一维布局模型，用于定义和控制容器中子元素的布局、方向和对齐方式。在 React Native 中，Flexbox 是最常用的布局方式之一。
容器属性
flexDirection
flexDirection 属性决定了主轴的方向。默认值为 row，表示主轴从左到右。其他可选值包括 column（主轴从上到下）、row-reverse（主轴从右到左）和 column-reverse（主轴从下到上）。
----- ---------------------- ----------- ---------- -------- ---------- -------- -------
justifyContent
justifyContent 属性用于设置主轴上的对齐方式。其可选值有 flex-start（起点对齐）、flex-end（终点对齐）、center（居中对齐）、space-between（两端对齐，间隔相等）和 space-around（每个项目两侧的间隔相等）。
----- ----------------------- ----------- ---------- -------- ---------- -------- -------
alignItems
alignItems 属性用于设置交叉轴上的对齐方式。其可选值有 stretch（拉伸以填满容器，这是默认值）、flex-start（起点对齐）、flex-end（终点对齐）和 center（居中对齐）。
----- ------------------- ----------- ---------- -------- ---------- -------- -------
alignSelf
alignSelf 属性允许单个子元素覆盖其父容器的 alignItems 设置。其可选值与 alignItems 相同。
----- ------------------- ----------- ----- ------------------ ----------------- -------- ----- ------------------ ------------------- -------- -------
flexWrap
flexWrap 属性决定当子元素超出容器宽度时是否换行。其可选值有 nowrap（不换行，这是默认值）和 wrap（换行）。
----- ----------------- --------- ---------- -------- ---------- -------- ---------- -------- ---------- -------- -------
flex
flex 属性定义了子元素在主轴方向上占据的空间比例。如果父容器设置了 flexDirection: 'row'，那么 flex 的值将决定子元素在水平方向上所占的比例；如果 flexDirection: 'column'，则决定子元素在垂直方向上所占的比例。
----- ---------------------- ------ --------- --------- ----- ------------- -------- -------- ----- ------------- -------- -------- ----- ------------- -------- -------- -------
子元素属性
width 和 height
width 和 height 属性定义了视图的宽高。如果父容器使用了 flex 布局，那么这些属性通常会失效。
----- -------------- ---- ------- ------ ---------- -------- -------
margin 和 padding
margin 属性用于设置外边距，而 padding 属性用于设置内边距。这两个属性都支持 top、right、bottom 和 left 方向。
----- ---------------- --- ------- ----- ---------- -------- -------
borderWidth 和 borderColor
borderWidth 属性用于设置边框的宽度，而 borderColor 属性用于设置边框的颜色。
----- -------------------- -- ------------ -------- ---------- -------- -------
其他布局组件
除了基本的 View 组件，React Native 还提供了一些特殊的布局组件来帮助开发者实现特定的布局需求。
ScrollView
ScrollView 组件用于创建一个可以滚动的内容区域。它允许用户通过手势或键盘导航来浏览内容。
------------ ------------ -- ---------- ------------- ------------- ----------- --- ----------- -------------
FlatList
FlatList 组件是一个高性能的列表组件，适用于大量数据项的展示。它具有内置的虚拟化功能，可以只渲染当前屏幕可见的部分，从而提高性能。
--------- ------------ ----- ----- ----- ----- ------ -------------------- -- ------------------------ --
SectionList
SectionList 组件类似于 FlatList，但它可以将数据分成多个部分，每个部分都有自己的标题。这在处理分组数据时非常有用。
------------
-----------
------- ---- ----- -------- ----------
------- ---- ----- -------- -------
--
-------------------- -- --------------------
-------------------------------- -- -----------------------------
--通过熟练掌握这些布局组件和它们的属性，你可以轻松地创建出美观且高效的 React Native 应用界面。