画一条精细无比的实线

还记得一开始作为前端小萌新，被 0.5px 支配的恐惧吗？

“你这条线画的有问题，跟我视觉稿上不一样，看起来不够精致～”
“就一条线，咋不一样？咋不精致？”
“你这个粗了一点点！”
“哪有？？？我看不出来啊？？？”
“很明显啊！你再帮我调小 0.5 个像素。”
“。。。”

当年我们幸运 + 惊喜地发现 CSS 有伪元素、有 transform: scaleY(0.5)，可以相对画出一条精确到小数点的线条时，才意识到：原来细微处还有这么多门门道道呵。

我在 React Native 中尝试了:

1.borderBottomWidth: 0.5
2.borderBottomWidth: 1; transform: [{scaleY: 0.5}]
3.height: 0.5
4.height: 1;transform: [{scaleY: 0.5}]

四种方式，结果都不尽如人意之后。我依旧没有选择狗带，下面这个方式通（逃）过了视觉妹子的火眼金睛。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
import React from 'react';
import {
  View,
  StyleSheet,
  PixelRatio
} from 'react-native';
export default function UnderLine() {
  return <View style={styles.underLine}></View>;
}
const styles = StyleSheet.create({
  underLine: {
    // 目前的最优解 Orz
    height: 1 / PixelRatio.get(),
    backgroundColor: '#DADFE6'
  }
});

画一条虚线（Dashed）

这个也许是一个相对挑（keng）战（die）过程了。

想当然，准备轻轻松松 borderStyle: 'dashed'; borderBottomWidth: 1???

怎么可能。

安卓对于 ‘dashed’ 支持可以说是惨不忍睹（IOS 我亲测也有问题），无法给元素单独一条边设置边框样式。

我的思路来自于 https://www.ctolib.com/mip/qfight-rn-dashline.html。

实现方式大同小异，都是用最原始方式，也就是一个个 View 元素，硬生生画出来。

不过我的方法支持横竖两种类型。

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
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
import React from 'react';
import {
  Text,
  View,
  StyleSheet,
  Dimensions,
} from 'react-native';
const screenWidth = Dimensions.get('window').width;
// dashScale(number): dash 每个点的规格/尺寸, 
// type(string): 水平/垂直类型，'row'/'column',
// color[string]: 颜色, 
// height(number): 垂直模式下的高度
export default function DashLine({ dashScale=6, type='row', color='#CED2D9', height=100 }) {
  let len = type === 'row' ? Math.ceil(screenWidth / dashScale) : Math.ceil(height / dashScale);
  let arr = [];
  let computedStyle = {};
  for(let i = 0; i < len; i++){
    arr.push(i);
  }
  if (type === 'row') {
    direction = 'row';
    computedStyle = {
      ...styles.dashItem,
      backgroundColor: color
    };
  } else {
    direction = 'column';
    computedStyle = {
      ...styles.dashItemCol,
      backgroundColor: color
    };
  }
  return <View style={{flexDirection: direction}}>
    {
      arr.map((item, index)=>{
        return (
          <Text
            style={computedStyle}
            key={'dash'+index}
          />
        );
      })
    }
  </View>;
}
const styles = StyleSheet.create({
  dashItem: {
    transform: [{scaleY: 0.5}],
    height: 1,
    width: 2,
    marginRight: 2,
    flex: 1,
    backgroundColor: '#CED2D9',
  },
  dashItemCol: {
    transform: [{scaleX: 0.5}],
    height: 2,
    width: 1,
    marginBottom: 2,
    flex: 1,
    backgroundColor: '#CED2D9',
  }
});

画阴影

RN 提供了阴影样式属性，但其仅支持 IOS 平台，在 Android 中需要：

  1. 需要设置 elevation 属性;
  2. color 只支持纯黑色 #000000;
  3. 如果 1 和 2 设置好了依旧在安卓不 work，请尝试为设置阴影的元素加上backgroundColor: #FFFFFF;

其他

  • 小心渲染一个列表时候，元素之间出现诡异的间隙
  • 事件响应元素层级不宜过深，安卓手机有兼容性问题

先到这儿。。。