{"id":13672198,"url":"https://github.com/doyoe/react-native-stylesheet-guide","last_synced_at":"2025-10-10T00:40:51.967Z","repository":{"id":75199850,"uuid":"50983413","full_name":"doyoe/react-native-stylesheet-guide","owner":"doyoe","description":"React-Native样式表指南","archived":false,"fork":false,"pushed_at":"2017-05-17T11:28:52.000Z","size":45,"stargazers_count":371,"open_issues_count":2,"forks_count":87,"subscribers_count":15,"default_branch":"master","last_synced_at":"2025-04-04T15:14:29.472Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":null,"has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/doyoe.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2016-02-03T07:50:32.000Z","updated_at":"2025-03-23T10:22:28.000Z","dependencies_parsed_at":"2023-06-05T17:45:37.427Z","dependency_job_id":null,"html_url":"https://github.com/doyoe/react-native-stylesheet-guide","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/doyoe/react-native-stylesheet-guide","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/doyoe%2Freact-native-stylesheet-guide","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/doyoe%2Freact-native-stylesheet-guide/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/doyoe%2Freact-native-stylesheet-guide/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/doyoe%2Freact-native-stylesheet-guide/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/doyoe","download_url":"https://codeload.github.com/doyoe/react-native-stylesheet-guide/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/doyoe%2Freact-native-stylesheet-guide/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":279002348,"owners_count":26083357,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-10-09T02:00:07.460Z","response_time":59,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-08-02T09:01:29.039Z","updated_at":"2025-10-10T00:40:51.925Z","avatar_url":"https://github.com/doyoe.png","language":null,"funding_links":[],"categories":["Others"],"sub_categories":[],"readme":"# React-Native 样式指南\n\n`React-Native` 的样式基本上是实现了 `CSS` 的一个子集，并且属性名不完全一致，所以当你开始在编写 `React-Native` 之前，可以先简要了解一下。\n\n## 当前对应 RN 版本\n\n0.44\n\n## 目录\n\n* [Properties 属性](#user-content-properties)\n    * [Text 文本](#user-content-text)\n    * [Dimension 尺寸](#user-content-dimension)\n    * [Positioning 定位](#user-content-positioning)\n    * [Margin 外部白](#user-content-margin)\n    * [Padding 内补白](#user-content-padding)\n    * [Border 边框](#user-content-border)\n    * [Background 背景](#user-content-background)\n    * [Transform 转换](#user-content-transform)\n    * [Flexbox 弹性盒](#user-content-flexbox)\n    * [Other 其他](#user-content-other)\n* [Values 取值](#user-content-values)\n    * [Color 颜色](#user-content-color)\n    * [Number 数值](#user-content-number)\n* [Units 单位](#user-content-units)\n    * [Pt 点](#user-content-pt)\n* [PixelRatio 像素密度](#user-content-pixelratio)\n\n\n\u003ca name=\"properties\"\u003e\u003c/a\u003e\n## Properties 属性\n\n\u003ca name=\"text\"\u003e\u003c/a\u003e\n### Text 文本（18）\n属性名 | 取值 | 描述\n---|---|---\ncolor | [\u0026lt;color\u0026gt;](#user-content-color) | 对应 `CSS` [color](http://css.doyoe.com/properties/color/color.htm) 属性\nfontFamily | string | 对应 `CSS` [font-family](http://css.doyoe.com/properties/font/font-family.htm) 属性\nfontSize | [\u0026lt;number\u0026gt;](#user-content-number) | 对应 `CSS` [font-size](http://css.doyoe.com/properties/font/font-size.htm) 属性\nfontStyle | `normal`, `italic` | 对应 `CSS` [font-style](http://css.doyoe.com/properties/font/font-style.htm) 属性，但阉割了 `oblique` 取值\nfontWeight | `normal`, `bold` `100~900` | 对应 `CSS` [font-weight](http://css.doyoe.com/properties/font/font-weight.htm) 属性，但阉割了 `bolder, lighter` 取值\nlineHeight | [\u0026lt;number\u0026gt;](#user-content-number) | 对应 `CSS` [line-height](http://css.doyoe.com/properties/text/line-height.htm) 属性\ntextAlign | `auto`, `left`, `right`, `center`, `justify`\u003csup\u003e`iOS`\u003c/sup\u003e | 对应 `CSS` [text-align](http://css.doyoe.com/properties/text/text-align.htm) 属性，但增加了 `auto` 取值。当取值为 `justify` 时，在 `Android` 上会变为 `left`\ntextDecorationLine | `none`, `underline`, `line-through`, `underline line-through` | 对应 `CSS` [text-decoration-line](http://css.doyoe.com/properties/text-decoration/text-decoration-line.htm) 属性，但阉割了 `overline`, `blink` 取值\ntextShadowColor | [\u0026lt;color\u0026gt;](#user-content-color) | 对应 `CSS` [text-shadow](http://css.doyoe.com/properties/text-decoration/text-shadow.htm) 属性中的颜色定义\ntextShadowOffset | {\u003cbr\u003ewidth:[\u0026lt;number\u0026gt;](#user-content-number),\u003cbr\u003eheight:[\u0026lt;number\u0026gt;](#user-content-number)\u003cbr\u003e} | 对应 `CSS` [text-shadow](http://css.doyoe.com/properties/text-decoration/text-shadow.htm) 属性中的阴影偏移定义\ntextShadowRadius | [\u0026lt;number\u0026gt;](#user-content-number) | 在 `CSS` 中，阴影的圆角大小取决于元素的圆角定义，不需要额外定义\nincludeFontPadding\u003cbr /\u003e\u003csup\u003e`Android`\u003c/sup\u003e | [\u0026lt;bool\u0026gt;](#user-content-bool) | Android在默认情况下会为文字额外保留一些padding，以便留出空间摆放上标或是下标的文字。对于某些字体来说，这些额外的padding可能会导致文字难以垂直居中。如果你把textAlignVertical设置为center之后，文字看起来依然不在正中间，那么可以尝试将本属性设置为false\ntextAlignVertical\u003cbr /\u003e\u003csup\u003e`Android`\u003c/sup\u003e | `auto`, `top`, `bottom`, `center` | 对应 `CSS` [vertical-align](http://css.doyoe.com/properties/text/vertical-align.htm) 属性，增加了 `auto` 取值，`center` 取代了 `middle`，并阉割了 `baseline, sub` 等值\nfontVariant\u003cbr /\u003e\u003csup\u003e`iOS`\u003c/sup\u003e | `small-caps`, `oldstyle-nums`, `lining-nums`, `tabular-nums`, `proportional-nums` | 对应 `CSS` [font-variant](http://css.doyoe.com/properties/font/font-variant.htm) 属性，但取值更丰富\nletterSpacing\u003cbr /\u003e\u003csup\u003e`iOS`\u003c/sup\u003e | [\u0026lt;number\u0026gt;](#user-content-number) | 对应 `CSS` [letter-spacing](http://css.doyoe.com/properties/text/letter-spacing.htm) 属性\ntextDecorationColor\u003cbr /\u003e\u003csup\u003e`iOS`\u003c/sup\u003e | [\u0026lt;color\u0026gt;](#user-content-color) | 对应 `CSS` [text-decoration-color](http://css.doyoe.com/properties/text-decoration/text-decoration-color.htm) 属性\ntextDecorationStyle\u003cbr /\u003e\u003csup\u003e`iOS`\u003c/sup\u003e | `solid`, `double`, `dotted`, `dashed` | 对应 `CSS` [text-decoration-style](http://css.doyoe.com/properties/text-decoration/text-decoration-style.htm) 属性，但阉割了 `wavy` 取值\nwritingDirection\u003cbr /\u003e\u003csup\u003e`iOS`\u003c/sup\u003e | `auto`, `ltr`, `rtl` | 对应 `CSS` [direction](http://css.doyoe.com/properties/writing-modes/direction.htm) 属性，增加了 `auto` 取值\n\n\u003ca name=\"dimension\"\u003e\u003c/a\u003e\n### Dimension 尺寸（6）\n属性名 | 取值 | 描述\n---|---|---\nwidth | [\u0026lt;number\u0026gt;](#user-content-number) | 对应 `CSS` [width](http://css.doyoe.com/properties/dimension/width.htm) 属性\nminWidth | [\u0026lt;number\u0026gt;](#user-content-number) | 对应 `CSS` [min-width](http://css.doyoe.com/properties/dimension/min-width.htm) 属性\nmaxWidth | [\u0026lt;number\u0026gt;](#user-content-number) | 对应 `CSS` [max-width](http://css.doyoe.com/properties/dimension/max-width.htm) 属性\nheight | [\u0026lt;number\u0026gt;](#user-content-number) | 对应 `CSS` [height](http://css.doyoe.com/properties/dimension/height.htm) 属性\nminHeight | [\u0026lt;number\u0026gt;](#user-content-number) | 对应 `CSS` [min-height](http://css.doyoe.com/properties/dimension/min-height.htm) 属性\nmaxHeight | [\u0026lt;number\u0026gt;](#user-content-number) | 对应 `CSS` [max-height](http://css.doyoe.com/properties/dimension/max-height.htm) 属性\n\n\u003ca name=\"positioning\"\u003e\u003c/a\u003e\n### Positioning 定位（6）\n属性名 | 取值 | 描述\n---|---|---\nposition | `absolute`, `relative` | 对应 `CSS` [position](http://css.doyoe.com/properties/positioning/position.htm) 属性，但阉割了 `static, fixed` 取值\ntop | [\u0026lt;number\u0026gt;](#user-content-number) | 对应 `CSS` [top](http://css.doyoe.com/properties/positioning/top.htm) 属性\nright | [\u0026lt;number\u0026gt;](#user-content-number) | 对应 `CSS` [right](http://css.doyoe.com/properties/positioning/right.htm) 属性\nbottom | [\u0026lt;number\u0026gt;](#user-content-number) | 对应 `CSS` [bottom](http://css.doyoe.com/properties/positioning/bottom.htm) 属性\nleft | [\u0026lt;number\u0026gt;](#user-content-number) | 对应 `CSS` [left](http://css.doyoe.com/properties/positioning/left.htm) 属性\nzIndex | [\u0026lt;number\u0026gt;](#user-content-number) | 对应 `CSS` [z-index](http://css.doyoe.com/properties/positioning/z-index.htm) 属性\n\n\u003ca name=\"margin\"\u003e\u003c/a\u003e\n### Margin 外部白（7）\n属性名 | 取值 | 描述\n---|---|---\nmargin | [\u0026lt;number\u0026gt;](#user-content-number) | 对应 `CSS` [margin](http://css.doyoe.com/properties/margin/margin.htm) 属性，不同的是，它只能定义一个参数，如需分别定义`上、右、下、左`4个方位的外补白，可以通过下面的单向外部白属性\nmarginHorizontal | [\u0026lt;number\u0026gt;](#user-content-number) | 无对应的 `CSS` 属性。其效果相当于同时设置 `marginRight` 和 `marginLeft`\nmarginVertical | [\u0026lt;number\u0026gt;](#user-content-number) | 无对应的 `CSS` 属性。其效果相当于同时设置 `marginTop` 和 `marginBottom`\nmarginTop | [\u0026lt;number\u0026gt;](#user-content-number) | 对应 `CSS` [margin-top](http://css.doyoe.com/properties/margin/margin-top.htm) 属性\nmarginRight | [\u0026lt;number\u0026gt;](#user-content-number) | 对应 `CSS` [margin-right](http://css.doyoe.com/properties/margin/margin-right.htm) 属性\nmarginBottom | [\u0026lt;number\u0026gt;](#user-content-number) | 对应 `CSS` [margin-bottom](http://css.doyoe.com/properties/margin/margin-bottom.htm) 属性\nmarginLeft | [\u0026lt;number\u0026gt;](#user-content-number) | 对应 `CSS` [margin-left](http://css.doyoe.com/properties/margin/margin-left.htm) 属性\n\n\u003ca name=\"padding\"\u003e\u003c/a\u003e\n### Padding 内部白（7）\n属性名 | 取值 | 描述\n---|---|---\npadding | [\u0026lt;number\u0026gt;](#user-content-number) | 对应 `CSS` [padding](http://css.doyoe.com/properties/padding/padding.htm) 属性，不同的是，它只能定义一个参数，如需分别定义`上、右、下、左`4个方位的内补白，可以通过下面的单向内部白属性\npaddingHorizontal | [\u0026lt;number\u0026gt;](#user-content-number) | 无对应的 `CSS` 属性。其效果相当于同时设置 `paddingRight` 和 `paddingLeft`\npaddingVertical | [\u0026lt;number\u0026gt;](#user-content-number) | 无对应的 `CSS` 属性。其效果相当于同时设置 `paddingTop` 和 `paddingBottom`\npaddingTop | [\u0026lt;number\u0026gt;](#user-content-number) | 对应 `CSS` [padding-top](http://css.doyoe.com/properties/padding/padding-top.htm) 属性\npaddingRight | [\u0026lt;number\u0026gt;](#user-content-number) | 对应 `CSS` [padding-right](http://css.doyoe.com/properties/padding/padding-right.htm) 属性\npaddingBottom | [\u0026lt;number\u0026gt;](#user-content-number) | 对应 `CSS` [padding-bottom](http://css.doyoe.com/properties/padding/padding-bottom.htm) 属性\npaddingLeft | [\u0026lt;number\u0026gt;](#user-content-number) | 对应 `CSS` [padding-left](http://css.doyoe.com/properties/padding/padding-left.htm) 属性\n\n\u003ca name=\"border\"\u003e\u003c/a\u003e\n### Border 边框（20）\n属性名 | 取值 | 描述\n---|---|---\nborderStyle | `solid`, `dotted`, `dashed` | 对应 `CSS` `border-style` 属性，但阉割了 `none, hidden, double, groove, ridge, inset, outset` 取值，且无方向分拆属性\nborderWidth | [\u0026lt;number\u0026gt;](#user-content-number) | 对应 `CSS` `border-width` 属性\nborderTopWidth | [\u0026lt;number\u0026gt;](#user-content-number) | 对应 `CSS` `border-top-width` 属性\nborderRightWidth | [\u0026lt;number\u0026gt;](#user-content-number) | 对应 `CSS` `border-right-width` 属性\nborderBottomWidth | [\u0026lt;number\u0026gt;](#user-content-number) | 对应 `CSS` `border-bottom-width` 属性\nborderLeftWidth | [\u0026lt;number\u0026gt;](#user-content-number) | 对应 `CSS` `border-left-width` 属性\nborderColor | [\u0026lt;color\u0026gt;](#user-content-color) | 对应 `CSS` `border-color` 属性\nborderTopColor | [\u0026lt;color\u0026gt;](#user-content-color) | 对应 `CSS` `border-top-color` 属性\nborderRightColor | [\u0026lt;color\u0026gt;](#user-content-color) | 对应 `CSS` `border-right-color` 属性\nborderBottomColor | [\u0026lt;color\u0026gt;](#user-content-color) | 对应 `CSS` `border-bottom-color` 属性\nborderLeftColor | [\u0026lt;color\u0026gt;](#user-content-color) | 对应 `CSS` `border-left-color` 属性\nborderRadius | [\u0026lt;number\u0026gt;](#user-content-number) | 对应 `CSS` `border-radius` 属性\nborderTopLeftRadius | [\u0026lt;number\u0026gt;](#user-content-number) | 对应 `CSS` `border-top-left-radius` 属性\nborderTopRightRadius | [\u0026lt;number\u0026gt;](#user-content-number) | 对应 `CSS` `border-top-right-radius` 属性\nborderBottomLeftRadius | [\u0026lt;number\u0026gt;](#user-content-number) | 对应 `CSS` `border-bottom-left-radius` 属性\nborderBottomRightRadius | [\u0026lt;number\u0026gt;](#user-content-number) | 对应 `CSS` `border-bottom-right-radius` 属性\nshadowColor | [\u0026lt;color\u0026gt;](#user-content-color) | 对应 `CSS` [box-shadow](http://css.doyoe.com/properties/border/box-shadow.htm) 属性中的颜色定义\nshadowOffset | {\u003cbr\u003ewidth: [\u0026lt;number\u0026gt;](#user-content-number), \u003cbr\u003eheight: [\u0026lt;number\u0026gt;](#user-content-number)\u003cbr\u003e} | 对应 `CSS` [box-shadow](http://css.doyoe.com/properties/border/box-shadow.htm) 属性中的阴影偏移定义\nshadowRadius | [\u0026lt;number\u0026gt;](#user-content-number) | 在 `CSS` 中，阴影的圆角大小取决于元素的圆角定义，不需要额外定义\nshadowOpacity | [\u0026lt;number\u0026gt;](#user-content-number) | 对应 `CSS` [box-shadow](http://css.doyoe.com/properties/border/box-shadow.htm) 属性中的阴影透明度定义\n\n\u003ca name=\"background\"\u003e\u003c/a\u003e\n### Background 背景（1）\n属性名 | 取值 | 描述\n---|---|---\nbackgroundColor | [\u0026lt;color\u0026gt;](#user-content-color) | 对应 `CSS` `background-color` 属性\n\n\u003ca name=\"transform\"\u003e\u003c/a\u003e\n### Transform 转换（3）\n属性名 | 取值 | 描述\n---|---|---\ntransform | `[{perspective: number}, {rotate: string}, {rotateX: string}, {rotateY: string}, {rotateZ: string}, {scale: number}, {scaleX: number}, {scaleY: number}, {translateX: number}, {translateY: number}, {skewX: string}, {skewY: string}]` | 对应 `CSS` `transform` 属性\ntransformMatrix | `TransformMatrixPropType` | 类似于 `CSS` 中 `transform` 属性的 `matrix()` 和 `matrix3d()` 函数\nbackfaceVisibility | `visible`, `hidden` | 对应 `CSS` `backface-visibility` 属性\n\n\u003ca name=\"flexbox\"\u003e\u003c/a\u003e\n### Flexbox 弹性盒（9）\n属性名 | 取值 | 描述\n---|---|---\nflex | [\u0026lt;number\u0026gt;](#user-content-number) | 对应 `CSS` `flex` 属性，但只能为整数值\nflexGrow | [\u0026lt;number\u0026gt;](#user-content-number) | 对应 `CSS` `flex-grow` 属性\nflexShrink | [\u0026lt;number\u0026gt;](#user-content-number) | 对应 `CSS` `flex-shrink` 属性\nflexBasis | [\u0026lt;number\u0026gt;](#user-content-number) | 对应 `CSS` `flex-basis` 属性\nflexDirection | `row`, `row-reverse`, `column`, `column-reverse` | 对应 `CSS` `flex-direction` 属性\nflexWrap | `wrap`, `nowrap` | 对应 `CSS` `flex-wrap` 属性，但阉割了 `wrap-reverse` 取值\njustifyContent | `flex-start`, `flex-end`, `center`, `space-between`, `space-around` | 对应 `CSS` `justify-content` 属性，但阉割了 `stretch` 取值。\nalignItems | `flex-start`, `flex-end`, `center`, `stretch` | 对应 `CSS` `align-items` 属性，但阉割了 `baseline` 取值。\nalignSelf | `auto`, `flex-start`, `flex-end`, `center`, `stretch` | 对应 `CSS` `align-self` 属性，但阉割了 `baseline` 取值\n\n\u003ca name=\"other\"\u003e\u003c/a\u003e\n### Other 其他\n属性名 | 取值 | 描述\n---|---|---\nopacity | [\u0026lt;number\u0026gt;](#user-content-number) | 对应 `CSS` `opacity` 属性\noverflow | `visible`, `hidden`, `scroll` | 对应 `CSS` `overflow` 属性，但阉割了 `auto` 取值\nelevation\u003cbr /\u003e\u003csup\u003e`Android`\u003c/sup\u003e | [\u0026lt;number\u0026gt;](#user-content-number) | `CSS`中没有对应的属性，只在 `Android5.0+` 上有效\nresizeMode | `cover`, `contain`, `stretch` | `CSS`中没有对应的属性，可以参考 `background-size` 属性\noverlayColor\u003cbr /\u003e\u003csup\u003e`Android`\u003c/sup\u003e | string | `CSS`中没有对应的属性，当图像有圆角时，将角落都充满一种颜色\ntintColor\u003cbr /\u003e\u003csup\u003e`iOS`\u003c/sup\u003e | [\u0026lt;color\u0026gt;](#user-content-color) | `CSS`中没有对应的属性，`iOS` 图像上特殊的色彩，改变不透明像素的颜色\n\n\n\u003ca name=\"values\"\u003e\u003c/a\u003e\n## Valuse 取值\n\n\u003ca name=\"color\"\u003e\u003c/a\u003e\n### Color 颜色\n\n`React Native` 支持了 `CSS` 中大部分的颜色类型：\n\n* `#f00` (#rgb)\n* `#f00c` (#rgba)：`CSS` 中无对应的值\n* `#ff0000` (#rrggbb)\n* `#ff0000cc` (#rrggbbaa)：`CSS` 中无对应的值\n* `rgb(255, 0, 0)`\n* `rgba(255, 0, 0, 0.9)`\n* `hsl(360, 100%, 100%)`\n* `hsla(360, 100%, 100%, 0.9)`\n* `transparent`\n* `0xff00ff00` (0xrrggbbaa)：`CSS` 中无对应的值\n* `Color Name`：支持了 [基本颜色关键字](http://css.doyoe.com/appendix/color-keywords.htm#basic) 和 [拓展颜色关键字](http://css.doyoe.com/appendix/color-keywords.htm#extended)，但不支持 [28个系统颜色](http://css.doyoe.com/appendix/color-keywords.htm#system)；\n\n\u003ca name=\"number\"\u003e\u003c/a\u003e\n### Number 数值\n\n在 `React-Native` 中，目前仅支持 `Number` 这一种长度取值。默认缺省了 `pt` 单位，详细请看 [Units 单位](#user-content-units) 部分。\n\n\u003ca name=\"units\"\u003e\u003c/a\u003e\n## Units 单位\n\n\u003ca name=\"pt\"\u003e\u003c/a\u003e\n### Pt 点\n\n在 `React-Native` 中，并不支持百分比单位，目前只支持一种单位，即 `pt` 绝对长度单位，同时，你在定义时不需要加单位，例如：\n\n```\n\u003cView style={{width: 100, height: 50}}\u003e\u003c/View\u003e\n```\n\n```\nvar styles = StyleSheet.create({\n    box: {\n        width: 100,\n        height: 50\n    }\n});\n```\n\n\u003ca name=\"pixelratio\"\u003e\u003c/a\u003e\n## PixelRatio 像素密度\n\n在 `React-Native` 中，访问设备像素密度的方法由 `PixelRatio` 类提供。\n\n我们的应用通常都会运行在不同的设备上，并且这些设备的像素密度很有可能各不相同。这会造成一个现象就是：\n\n* 定义了元素的边框为 `1像素`，而实际上在不同像素密度的设备上结果不一样，比如：iPhone6 显示为 `2像素`，iPhone6 Plus 显示为 `3像素`；\n* 对于一个图片来讲，因为设备的像素密度不同，它也需要对应不同尺寸的规则，以防止图片过小变得模糊；\n\n### 根据像素密度指定边框厚度\n\n出于对产品体验的一致性，我们会要求不论是在哪种设备上，其边框厚度都应该是相同的。一个取得物理上的相同边框厚度的好方法就是用逻辑尺寸除以像素密度比：\n\n```\nvar styles = StyleSheet.create({\n    box: {\n        borderWidth: 1 / PixelRatio.get(),\n        borderStyle: solid\n    }\n});\n```\n\n上述代码将保证你的应用在所有的设备上（像素密度），都获得 `1像素` 的边框厚度。`PixelRatio` 通过 `get()` 方法来返回设备的像素密度。\n\n未完待续。。。","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdoyoe%2Freact-native-stylesheet-guide","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdoyoe%2Freact-native-stylesheet-guide","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdoyoe%2Freact-native-stylesheet-guide/lists"}