56

React Native 视觉还原小（da）技（shen）巧（keng）若干

 4 years ago
source link: https://www.tuicool.com/articles/qQJ7Jny
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

还记得一开始作为前端小萌新，被 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}]

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

import React from 'react';
import {
  View,
  StyleSheet,
  PixelRatio
} from 'react-native';

export default function UnderLine(){
  return <Viewstyle={styles.underLine}></View>;
}

const styles = StyleSheet.create({
  underLine: {
    // 目前的最优解 Orz
    height: 1 / PixelRatio.get(),
    backgroundColor: '#DADFE6'
  }
});

report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK