RN中的Style应用

王贺锋

RN中的Style应用

基础理论篇：

设备尺寸和分辨率

Dimensions

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
/**
 * iOS 和 android 的window
 * scale是逻辑坐标转换成物理坐标时使用的变幻系数(device pixel density)
 * fontScale (android only)
 * 【注】若写到style中, 需要在render时更新一次
 */
const {height, width, scale, fontScale} = Dimensions.get('window');
//android有 Screen 和 window的区别; iOS无
const {height, width, scale, fontScale} = Dimensions.get('screen');

//按比例使用 size (@mtfe/react-native-css)
const ratio =  Dimensions.get('window').width / 320;
function r (size) {
  return Math.floor(size * ratio);
}

PixelRatio

1
2
3
4
5
6
7
//同上
const {scale, fontScale} = {scale: PixelRatio.get(), fontScale: PixelRatio.getFontScale()};
//把 point 转成 pixel,即: point * scale
const pixelSize = PixelRatio.getPixelSizeForLayoutSize(pointSize);

//一个pixel 对应的 point大小
const px = 1/PixelRatio.get();

FlexBox

背景介绍：跟传统的Box模型对比, Flexbox Layout目标是一个container实现更有效的布局、对齐、自动填充, 即使在子元素大小或个数没有指定的情况下。 RN的flex布局是Web的子集。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
//====================== 修饰子元素在当前元素中的布局 ==========================
/**
 * 子元素的排列方向 row: 从左到右横向排 column:从上到下竖向排
 * 当前元素有flexDirect后, 才能使用flex layout
 */
flexDirection 	enum('row', 'column')
/**
 * 子元素无法在单行(one line)中展示完全, 是否多行展示
 */
flexWrap 		enum('wrap', 'nowrap')
/**
 * 子元素在当前元素的横轴(main axis)对齐方式 
 * flex-start: 	依次排列, 左对齐startline
 * flex-end: 	依次排列, 右对齐endline
 * center:		依次排泄, 居中
 * space-between左右子元素分别对齐startline和endline, 元素间的space相等, 元素占满父元素空间
 * space-around ***
 */
justifyContent 	enum('flex-start', 'flex-end', 'center', 'space-between', 'space-around')
/**
 * 子元素在当前元素的纵轴(cross axis)对齐方式 
 * flex-start: 	子元素的上side对齐当前元素纵轴的startline
 * flex-end: 	子元素的下side对齐当前元素纵轴的endline
 * center:		子元素的中心跟当前元素纵轴的中心对齐
 * strech		拉伸子元素, 上side对齐startline, 下side对齐endline, 即高度跟当前元素纵轴相同
 */
alignItems 		enum('flex-start', 'flex-end', 'center', 'stretch')

//====================== 修饰当前元素在父元素中的布局 ==========================
/**
 * 当前元素在父元素中的flex空间占比, 即 =当前flex值/同级所有子元素的flex值的和
 * 建议默认父元素flex空间为1, 子元素根据1算出自己的flex数值
 */
flex 			number
/**
 * 当前元素可以自选在父元素的纵轴(cross axis)对齐方式 
 * flex-start: 	当前元素的上side对齐父元素纵轴的startline
 * flex-end: 	当前元素的下side对齐父元素纵轴的endline
 * center:		当前元素的中心跟父元素纵轴的中心对齐
 * strech		拉伸当前元素, 上side对齐startline, 下side对齐endline, 即高度跟父元素纵轴相同
 */
alignSelf 		enum('auto', 'flex-start', 'flex-end', 'center', 'strech')

============================== 图示如下 ==========================================

flexDirection

Alt text

flexWrap

Alt text

justifyContent

Alt text

alignItems

Alt text

alignSelf

Alt text

Box Model

Alt text

1
2
3
4
5
6
7
top、right、bottom、left
marginTop、marginRight、marginBottom、marginLeft
marginHorizontal、marginVertical
paddingTop、paddingRight、paddingBottom、paddingLeft
paddingHorizontal、paddingVertical
borderTopWidth、borderRightWidth、borderBottomWidth、borderLeftWidth
width、height
1
2
3
4
5
6
/**
 * 当前元素在父元素中的定位样式, 使用 top、right、bottom、left + width、height 实现准确布局
 * absolute: 从父元素的排列中脱离, 不占据父元素的空间, 其他子元素flex时可以认为当前元素不存在
 * relative: 占据父元素空间
 */
position	enum{'absolute', 'relative'}

图片使用篇

SVG | AI | PNG | JPEG

SVG: (Scalable Vector Graphics) 基于XML, 描述二维矢量图形的图形格式。无限放大而不影响质量

AI: (Adobe illustrator)矢量图, 使用Adobe illustrator图形制作软件做的矢量图

PNG: (Portable Network Graphics) 一种无损压缩的位图(Bitmap)图形格式, 文件大

JPEG: (Joint Photographic Experts Group)一种针对照片视频而广泛使用的一种有损压缩标准方法

目前项目中使用的是PNG, 每个icon需要多张不同分辨率的PNG图。可以考虑转向SVG阵营

另外根据PM的设计, 我们的图标转向使用Google提供的一套图标库, 相比于手动下载这些图标, 推荐使用

下面介绍的icon工具, 不仅自带了Google图标, 易用性也大大提高

好用的icon工具

  1. react-native-icons
  2. react-native-vector-icons