跳到主要内容

样式

使用 React Native,你可以用 JavaScript 来为你的应用设置样式。所有核心组件都接受一个名为 style 的 prop。样式名称和通常与 CSS 在 Web 上的工作方式匹配,只是名称使用驼峰命名法,例如 backgroundColor 而不是 background-color

style prop 可以是一个普通的 JavaScript 对象。这就是我们通常在示例代码中使用的。你也可以传入一个样式数组——数组中最后一个样式具有优先权,因此你可以利用这一点来继承样式。

随着组件复杂度的增加,通常使用 StyleSheet.create 在一个地方定义多个样式会更简洁。这是一个示例:

一个常见的模式是让你的组件接受一个 style prop,该 prop 又用于为子组件设置样式。你可以使用这种方式使样式像 CSS 中那样“层叠”。

还有许多其他方法可以自定义文本样式。请查阅文本组件参考以获取完整列表。

现在你可以让你的文本变得美观。成为样式专家的下一步是学习如何控制组件大小

已知问题

  • react-native#29308: 在某些情况下,React Native 的工作方式与 Web 上的 CSS 不匹配,例如,触摸区域永远不会超出父视图的边界,并且在 Android 上不支持负外边距。