react-native 样式总结

布局

React-Native的布局是完全是用flex来实现。

flex的用法就不多说了，具体可参考阮一峰老师的这篇文章《flex布局：语法篇》，里面对flex的讲解非常详细；

需要注意的是：React-Native中的flex的相关属性不是完全依照w3c规范提供的各种值，对其中的某些属性值进行了阉割。

React-Native 的样式基本上是实现了 CSS 的一个子集，并且属性名不完全一致。

下面就借用《React-Native样式指南》中内容说明一下：

目录

• Properties 属性
  • Text 文本
  • Dimension 尺寸
  • Positioning 定位
  • Margin 外部白
  • Padding 内补白
  • Border 边框
  • Background 背景
  • Transform 转换
  • Flexbox 弹性盒
  • Other 其他
• Values 取值
  • Color 颜色
  • Number 数值
• Units 单位
  • Pt 点
• PixelRatio 像素密度

Properties 属性

Text 文本（18）

<a name="dimension"></a>

Dimension 尺寸（6）

<a name="positioning"></a>

Positioning 定位（6）

Margin 外部白（7）

Padding 内部白（7）

Border 边框（20）

<a name="background"></a>

Background 背景（1）

<a name="transform"></a>

Transform 转换（3）

<a name="flexbox"></a>

Flexbox 弹性盒（9）

<a name="other"></a>

Other 其他

<a name="values"></a>

Valuse 取值

<a name="color"></a>

Color 颜色

React Native 支持了 CSS 中大部分的颜色类型：

• #f00 (#rgb)
• #f00c (#rgba)：CSS 中无对应的值
• #ff0000 (#rrggbb)
• #ff0000cc (#rrggbbaa)：CSS 中无对应的值
• rgb(255, 0, 0)
• rgba(255, 0, 0, 0.9)
• hsl(360, 100%, 100%)
• hsla(360, 100%, 100%, 0.9)
• transparent
• 0xff00ff00 (0xrrggbbaa)：CSS 中无对应的值
• Color Name：支持了 基本颜色关键字 和 拓展颜色关键字，但不支持 28个系统颜色；

<a name="number"></a>

Number 数值

在 React-Native 中，目前仅支持 Number 这一种长度取值。默认缺省了 pt 单位，详细请看 Units 单位 部分。

<a name="units"></a>

Units 单位

<a name="pt"></a>

Pt 点

在 React-Native 中，并不支持百分比单位，目前只支持一种单位，即 pt 绝对长度单位，同时，你在定义时不需要加单位，例如：

<View style={{width: 100, height: 50}}></View>

var styles = StyleSheet.create({
    box: {
        width: 100,
        height: 50
    }
});

<a name="pixelratio"></a>

PixelRatio 像素密度

在 React-Native 中，访问设备像素密度的方法由 PixelRatio 类提供。

我们的应用通常都会运行在不同的设备上，并且这些设备的像素密度很有可能各不相同。这会造成一个现象就是：

• 定义了元素的边框为 1像素，而实际上在不同像素密度的设备上结果不一样，比如：iPhone6 显示为 2像素，iPhone6 Plus 显示为 3像素；
• 对于一个图片来讲，因为设备的像素密度不同，它也需要对应不同尺寸的规则，以防止图片过小变得模糊；

根据像素密度指定边框厚度

出于对产品体验的一致性，我们会要求不论是在哪种设备上，其边框厚度都应该是相同的。一个取得物理上的相同边框厚度的好方法就是用逻辑尺寸除以像素密度比：

var styles = StyleSheet.create({
    box: {
        borderWidth: 1 / PixelRatio.get(),
        borderStyle: solid
    }
});

上述代码将保证你的应用在所有的设备上（像素密度），都获得 1像素 的边框厚度。PixelRatio 通过 get() 方法来返回设备的像素密度。