样式
在 React Native 中,您使用 JavaScript 为您的应用程序设置样式。所有核心组件都接受一个名为 style
的 prop。样式名称和值通常与 CSS 在 Web 上的工作方式匹配,只是名称使用驼峰式命名法,例如 backgroundColor
而不是 background-color
。
style
prop 可以是一个普通的 JavaScript 对象。这是我们通常用于示例代码的方式。您还可以传递一个样式数组 - 数组中最后一个样式具有优先权,因此您可以使用此方法继承样式。
随着组件复杂度的增加,通常使用 StyleSheet.create
在一个地方定义多个样式会更清晰。下面是一个例子:
一种常见的模式是让组件接受一个 style
prop,然后该 prop 用于设置子组件的样式。您可以使用这种方式使样式像 CSS 中那样“层叠”。
有更多方法可以自定义文本样式。请查阅Text 组件参考以获取完整列表。
现在您可以让您的文本变得美观。成为样式专家的下一步是学习如何控制组件大小。
已知问题
- react-native#29308:在某些情况下,React Native 与 CSS 在 Web 上的工作方式不符,例如触摸区域永远不会超出父视图边界,并且 Android 不支持负边距。