样式
非官方测试版翻译
本页面由 PageTurner AI 翻译(测试版)。未经项目官方认可。 发现错误? 报告问题 →
在 React Native 中,你可以使用 JavaScript 为应用添加样式。所有核心组件都接受名为 style 的属性。样式名称和取值通常与网页 CSS 的工作方式一致,但命名采用驼峰式写法,例如使用 backgroundColor 而非 background-color。
style 属性可以是普通的 JavaScript 对象,这也是示例代码中常用的形式。你也可以传递样式数组,数组中的最后一个样式具有最高优先级,因此可以利用这一特性实现样式继承。
当组件复杂度增加时,使用 StyleSheet.create 在单一位置定义多个样式通常会使代码更清晰。示例如下:
一种常见模式是让组件接受 style 属性,并将其传递给子组件进行样式设置。通过这种方式可以实现类似 CSS 的样式"层叠"效果。
文本样式定制还有更多方法,完整列表请查阅 Text 组件参考文档。
现在你已能让文本效果更美观。成为样式专家的下一步是学习如何控制组件尺寸。
已知问题
- react-native#29308:某些情况下 React Native 与网页 CSS 行为存在差异,例如触摸区域不会超出父视图边界,且在 Android 上不支持负边距(negative margin)。