跳到主要内容

样式

在 React Native 中,您可以使用 JavaScript 来设置应用程序的样式。所有核心组件都接受名为 style 的属性。样式名称和 通常与 CSS 在 Web 上的工作方式相匹配,除了名称使用驼峰式写法,例如 backgroundColor 而不是 background-color

style 属性可以是一个普通的 JavaScript 对象。这通常是我们用于示例代码的方式。您也可以传递样式数组 - 数组中最后一个样式具有优先权,因此您可以使用它来继承样式。

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

一种常见的模式是使您的组件接受一个 style 属性,该属性反过来用于设置子组件的样式。您可以使用它来使样式像 CSS 中那样“层叠”。

还有更多方法可以自定义文本样式。请查看 Text 组件参考 以获取完整列表。

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

已知问题

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