样式

借助 React Native，你可以使用 JavaScript 设计你的应用。所有核心组件都接受名为 style 的 prop。样式名称和 values 通常与 CSS 在网络上的工作方式相匹配，但名称是使用驼峰式大小写编写的，例如 backgroundColor 而不是 background-color。

¥With React Native, you style your application using JavaScript. All of the core components accept a prop named style. The style names and values usually match how CSS works on the web, except names are written using camel casing, e.g. backgroundColor rather than background-color.

style 属性可以是一个普通的旧 JavaScript 对象。这就是我们通常使用的示例代码。你还可以传递一系列样式 - 数组中最后一个样式具有优先权，因此你可以使用它来继承样式。

¥The style prop can be a plain old JavaScript object. That's what we usually use for example code. You can also pass an array of styles - the last style in the array has precedence, so you can use this to inherit styles.

随着组件变得越来越复杂，使用 StyleSheet.create 在一个地方定义多种样式通常会更简洁。这是一个例子：

¥As a component grows in complexity, it is often cleaner to use StyleSheet.create to define several styles in one place. Here's an example:

一种常见的模式是让你的组件接受 style 属性，该属性又用于设置子组件的样式。你可以使用它来像 CSS 中那样制作样式 "cascade"。

¥One common pattern is to make your component accept a style prop which in turn is used to style subcomponents. You can use this to make styles "cascade" the way they do in CSS.

有很多方法可以自定义文本样式。查看 文本组件参考 以获得完整列表。

¥There are a lot more ways to customize the text style. Check out the Text component reference for a complete list.

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

¥Now you can make your text beautiful. The next step in becoming a style expert is to learn how to control component size.

已知的问题

¥Known issues

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

  ¥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.