iT邦幫忙

2021 iThome 鐵人賽

DAY 10
0
Mobile Development

卡卡30天學 React Native系列 第 10

[ 卡卡 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;
  },
};
  1. 接著到 app.js
import { layout } from '../constants/layout';

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

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

如此一來就可以使用 css 方法來呈現 padding 的樣式嚕!!這樣減少了很多不必要的字元!!

結論

總之樣式的優化其實很重要,需要明確易懂,到現在介紹的這幾個方式,希望對大家有幫助!!

Day 10 done 歡迎指教嚕!!


上一篇
[ 卡卡 DAY 9 ] - React Native style 優化、共用沒煩惱!window.innerWidth 在 RN 怎麼處理?
下一篇
[ 卡卡 DAY 11 ] - React Native UI 元件(component) 介紹(上)
系列文
卡卡30天學 React Native30

尚未有邦友留言

立即登入留言