還記得之前有提到在 Day 5 有提到 React Native 的 margin / padding / border ?
針對這麼不合理的寫法我們要怎麼讓他優化呢?
今天就來運用 js 來讓寫法更簡潔吧 !
什麼是 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;
},
};
import { layout } from '../constants/layout';
接著就可以於 styleSheet 的地方加入
const styles = StyleSheet.create({
container: {
...layout.padding(25, 15, 10, 5)
},
});
如此一來就可以使用 css 方法來呈現 padding 的樣式嚕!!這樣減少了很多不必要的字元!!
總之樣式的優化其實很重要,需要明確易懂,到現在介紹的這幾個方式,希望對大家有幫助!!
Day 10 done 歡迎指教嚕!!