React Native 是一种基于 React 库开发移动应用的框架。使用 React Native 可以有效地快速构建原生应用，其在构建原生应用的同时，也需要考虑移动端特有的样式布局问题。在本篇文章中，我们将深入了解 React Native 中的样式布局，并通过示例来展示它们的使用方法。
盒模型
在 Web 开发中，CSS 的盒模型常常被使用来进行布局。在 React Native 中，样式布局同样采用了盒模型，对于每个元素来说，它都有一个可视区域 viewBox，同时也考虑了样式以及边框的部分。
React Native 中的盒模型主要由以下四部分组成：
内边距（padding）
内边距是元素内容区域与边框之间的间距，可以通过属性 padding 或者 paddingTop、paddingRight、paddingBottom、paddingLeft 单独设置各个方向的内边距。
<View style={{padding: 10}}>
<Text>Hello, World!</Text>
</View>边框（border）
边框包裹着元素的内容和内边距，可以通过属性 borderWidth、borderColor 和 borderRadius 来设置元素的边框样式。
<View style={{borderWidth: 1, borderColor: '#000', borderRadius: 5}}>
<Text>Hello, World!</Text>
</View>外边距（margin）
外边距是元素边框与其周围元素之间的空间，可以通过属性 margin 或者 marginTop、marginRight、marginBottom、marginLeft 单独设置各个方向的外边距。
<View style={{margin: 10}}>
<Text>Hello, World!</Text>
</View>尺寸（dimension）
尺寸是指元素的宽度和高度，可以通过属性 width 和 height 来设置元素的尺寸。
<View style={{width: 100, height: 100}}>
<Text>Hello, World!</Text>
</View>弹性盒子
弹性盒子布局（Flexbox Layout）是一种用于在屏幕上按比例布局项目的 CSS3 弹性盒子布局。在 React Native 中同样支持弹性盒子布局，通过使用属性 flex、flexDirection、justifyContent 和 alignItems 等来控制子元素在容器中的布局方式。
容器属性
flex
在弹性盒子布局中，元素的主轴方向是由属性 flex 决定的。如果将一个容器的 flex 设置为 1，则表示该容器子元素沿着主轴方向平均分配剩余空间。如果将一个元素的 flex 设置为 0，则表示该元素会被缩小，并且不会分配剩余空间。
<View style={{flex: 1}}>
<View style={{flex: 1, backgroundColor: 'red'}} />
<View style={{flex: 2, backgroundColor: 'blue'}} />
</View>在上面的示例中，子元素的 flex 属性决定了它们在容器中占的比例，即红色元素占 1：3，蓝色元素占 2：3。
flexDirection
flexDirection 属性用于设置子元素在容器内的排列方向，它可以取值为 row、column、row-reverse 或 column-reverse，分别表示水平方向、垂直方向、水平方向的反向排列和垂直方向的反向排列。
<View style={{flex: 1, flexDirection: 'row'}}>
<View style={{width: 50, height: 50, backgroundColor: 'red'}} />
<View style={{width: 50, height: 50, backgroundColor: 'blue'}} />
</View>在上面的示例中，子元素沿着水平方向排列。
justifyContent
justifyContent 属性用于设置子元素在主轴方向上的对齐方式，可以取值为 flex-start、center、flex-end、space-between 和 space-around。
<View style={{flex: 1, flexDirection: 'row', justifyContent: 'space-evenly'}}>
<View style={{width: 50, height: 50, backgroundColor: 'red'}} />
<View style={{width: 50, height: 50, backgroundColor: 'blue'}} />
</View>在上面的示例中，子元素沿着主轴方向居中对齐。
alignItems
alignItems 属性用于设置子元素在交叉轴方向上的对齐方式，可以取值为 flex-start、center、flex-end、stretch 和 baseline。
<View style={{flex: 1, flexDirection: 'column', alignItems: 'center'}}>
<View style={{width: 50, height: 50, backgroundColor: 'red'}} />
<View style={{width: 50, height: 50, backgroundColor: 'blue'}} />
</View>在上面的示例中，子元素沿着交叉轴方向居中对齐。
子元素属性
除了上述的容器属性之外，子元素也可以通过使用 flex、alignSelf 和 flexGrow 等属性来完成其自身的布局。
flex
子元素的 flex 属性用于设置其在容器内占据多少空间，它的取值可以为任意非负整数。如果一个子元素的 flex 属性比其他子元素大，则该子元素在容器中占用更多的空间。
<View style={{flex: 1}}>
<View style={{flex: 1, backgroundColor: 'red'}} />
<View style={{flex: 2, backgroundColor: 'blue'}} />
</View>在上面的示例中，子元素的 flex 属性决定了它们在容器中占的比例，即红色元素占 1：3，蓝色元素占 2：3。
alignSelf
子元素的 alignSelf 属性用于覆盖容器的默认对齐方式，可以取值为 auto、flex-start、center、flex-end、stretch 和 baseline。
<View style={{flex: 1, flexDirection: 'column', alignItems: 'center'}}>
<View style={{width: 50, height: 50, backgroundColor: 'red', alignSelf: 'flex-start'}} />
<View style={{width: 50, height: 50, backgroundColor: 'blue'}} />
</View>在上面的示例中，红色元素的 alignSelf 属性使其沿着交叉轴的起始端对齐，而不是容器的默认居中对齐方式。
flexGrow
子元素的 flexGrow 属性用于控制子元素是否可以扩展。如果为 1，则表示该子元素可以占据剩余空间。如果为 0，则表示该子元素将不会被扩展。
<View style={{flex: 1}}>
<View style={{flexGrow: 1, backgroundColor: 'red'}} />
<View style={{flexGrow: 0, backgroundColor: 'blue'}} />
</View>在上面的示例中，红色元素在宽度上会占据所有可能的剩余空间，而蓝色元素则保持原始宽度。
示例应用
综合以上所述的内容，下面是一个 React Native 示例应用，它使用盒模型和弹性盒子布局来实现一个简单的 UI。
-- -------------------- ---- -------
------ ----- ---- --------
------ ------------ ----- ----- ------ ---- ---------------
----- --- - -- -- -
------ -
----- -------------------------
------ ------------- ----------------------------- ------------------- --
----- ---------------------------- -------------
----- -------------------------------- -- -- -----------
----- -------------------------------
----- ---------------------- -----------------------
----- ------------------------------- -----------
-------
----- ---------------------- -------------------------
----- ----------------------------- --------------
-------
-------
-------
--
--
----- ------ - -------------------
---------- -
----- --
--------------- ---------
----------- ---------
---------------- -------
------------------ ---
--
----- -
------ ----
------- ----
------------- ---
------------- ---
--
------- -
--------- ---
----------- -------
------------- ---
--
---------- -
--------- ---
------------- ---
--
---------------- -
-------------- ------
--
------- -
----- --
-------- ---
------------- --
--
-------------- -
---------------- ----------
------------ --
--
---------------- -
---------------- ----------
----------- --
--
----------- -
------ -------
---------- ---------
--
---
------ ------- ----在上面的示例中，我们通过使用盒模型和弹性盒子布局来实现了一个具有响应式设计的 UI。在真实的应用中，我们可以通过使用类似的技术来构建复杂的 UI 以及实现更高质量的用户体验。
结论
React Native 中的样式布局与 Web 开发中的 CSS 布局类似，但由于其所应用的环境不同，它们也有各自独特的特点。在本篇文章中，我们介绍了 React Native 中的盒模型和弹性盒子布局，并通过示例来展示了它们在实际应用中的使用方法。同时也提醒大家，使用 CSS3 弹性盒子布局时，也需要注意其在特定浏览器中的兼容性问题。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66ffd4d0cf8eedf48a484d4d