[ 卡卡 DAY 10 ] - React native 如何让样式更简洁 之 margin, padding 回到 css 写法

还记得之前有提到在 Day 5 有提到 React Native 的 margin / padding / border ？
针对这麽不合理的写法我们要怎麽让他优化呢?
今天就来运用 js 来让写法更简洁吧 !

如何写让样式更简洁呢?

1. 分离样式减少使用 inline style
2. 将共用的属性提出来至 constants
3. 透过 Mixin（混合器）来创造新的样式模板

什麽是 Mixin（混合器）呢？
就是可以简单的将样式分享，像是如果你常常使用一样的样式，就应该把它改成优良的 Mixin（混合器）。

在 js 要如何制作一个 Mixin（混合器）？
我们只需要制作一个函数且返回对象的函数即可有此效果！

接着我们来尝试把 padding 优化成可以像是 css 的方式来写样式，建置一个简单的 Mixin:

1.先在 constants 档案夹中建置一个 layout.js

export const layout = {
  padding(...arg) {
    let padding = {};
    switch (arg.length) {
      case 1:
        padding = {
          paddingTop: arg[0],
          paddingRight: arg[0],
          paddingBottom: arg[0],
          paddingLeft: arg[0],
        };
        break;
      case 2:
        padding = {
          paddingVertical: arg[0],
          paddingHorizontal: arg[1],
        };
        break;
      case 3:
        padding = {
          paddingTop: arg[0],
          paddingHorizontal: arg[1],
          paddingBottom: arg[2],
        };
        break;
      case 4:
        padding = {
          paddingTop: arg[0],
          paddingRight: arg[1],
          paddingBottom: arg[2],
          paddingLeft: arg[3],
        };
        break;
      default:
        break;
    }
    return padding;
  },
};

2. 接着到 app.js

import { layout } from '../constants/layout';

接着就可以於 styleSheet 的地方加入

const styles = StyleSheet.create({
  container: {
    ...layout.padding(25, 15, 10, 5)
  },
});

如此一来就可以使用 css 方法来呈现 padding 的样式噜！！这样减少了很多不必要的字元！！

结论

总之样式的优化其实很重要，需要明确易懂，到现在介绍的这几个方式，希望对大家有帮助！！

Day 10 done 欢迎指教噜！！