7、React Native 组件样式设计全解析

React Native 组件样式设计全解析

1. 样式设计基础概述

在移动应用开发中，除了实现功能，样式设计同样至关重要。一个外观出色的应用能极大提升用户的使用意愿。在 React Native 里，组件样式设计有其独特之处，尽管它与 CSS 有一些相似点，但差异也很明显。

1.1 React Native 组件样式特点

React Native 自带众多内置组件，社区也开发了大量可用于项目的组件。不同组件支持特定的样式，这些样式在不同类型组件上的适用性有所不同。例如：
| 组件 | 支持的特定样式 |
| ---- | ---- |
| Text | fontWeight（字体粗细） |
| View | flex（组件布局） |

部分样式元素在不同组件间有相似之处但并不相同，还有些样式仅适用于特定平台，如 ShadowPropTypesIOS 仅适用于 iOS。

1.2 样式应用与组织的重要性

学习各种样式及其操作方法需要时间，因此从基础的样式应用和组织开始学习十分关键。良好的样式组织习惯有助于后续管理应用，也便于使用更高级的技术。

2. React Native 中样式的应用与组织

2.1 应用样式的方法

在 React Native 中，有多种方式可以为元素应用样式，常见的有内联样式和使用 StyleSheet 样式表。

2.1.1 内联样式

内联样式是直接在组件上定义样式，示例代码如下：