還記得之前有提到在 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 歡迎指教嚕！！