跳到主要内容

样式

使用 React Native 时,你可以使用 JavaScript 为应用设置样式。所有核心组件都接受一个名为 style 的 prop。样式名称和值通常与网页上的 CSS 工作方式一致,但名称使用驼峰命名法书写,例如使用 backgroundColor 而不是 background-color。

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

随着组件变得越来越复杂,使用 StyleSheet.create 在同一位置定义多个样式通常会更清晰。下面是一个示例:

一种常见模式是让组件接受一个 style prop,然后使用它为子组件设置样式。你可以利用这种方式,让样式像 CSS 中那样进行“层叠”。

自定义文本样式的方式还有很多。请参阅Text 组件参考,了解完整列表。

现在你可以让文本变得更漂亮了。成为样式专家的下一步是学习如何控制组件尺寸。

已知问题​

  • react-native#29308: In some cases React Native does not match how CSS works on the web, for example the touch area never extends past the parent view bounds and on Android negative margin is not supported.