react-native-pg-style
以最簡單的方式編寫樣式代碼,拋棄react-native標準的樣式創建方式.
看大家寫的源碼中都是按照react-native標準的樣式創建方式來寫樣式代碼的,樣式代碼就佔了大概四分之一,甚至三分之一的代碼,然而我卻喜歡把樣式寫在一行當中.而不用const styles=StyleSheet.create({樣式屬性...})
來寫,我覺得這樣在改動樣式時便不用在跑到StyleSheet.create
中修改,而且代碼量會少很多,於是就有了這個插件.
下面說明中的插件就是當前這個react-native-pg-style插件
github地址: https://github.com/geek-prince/react-native-gp-style
npm地址: https://www.npmjs.com/package/react-native-gp-style
先簡單感受一下
以侵入式等級1爲例,什麼是侵入式等下下面再介紹
標準方法創建該樣式爲:
const styles=StyleSheet.create({
container:{
padding:15,
width:Dimensions.get('window').width,
backgroundColor:'#999',
marginTop:100,
},
button:{
width:'100%',
height:50,
backgroundColor:'#f90',
justifyContent:'center',
alignItems:'center',
borderColor:'#0f9',
borderRadius:25,
borderWidth:2,
},
btnText:{
backgroundColor:'#0000',
color:'#fff',
fontSize:20,
},
});
<View style={styles.container}>
<TouchableOpacity style={styles.button}>
<Text style={styles.btnText}>有本事點我呀</Text>
</TouchableOpacity>
</View>
很長的一段代碼對吧,那再來看看用了這個插件之後的代碼爲:
<View style={[sf.spad(15),sf.sw(s.w),s.bg999,sf.smarT(100)]}>
<TouchableOpacity style={[s.w100,sf.sh(50),sf.sbgc('#f90'),s.center,sf.sb('#0f9',25,2)]}>
<Text style={[sf.stext(20,'#fff',)]}>有本事點我呀</Text>
</TouchableOpacity>
</View>
直接發樣式寫在一行內,完全拋棄const styles=StyleSheet.create
這樣的方法,要修改時直接在組件這裏就改了,不用跑到const styles=StyleSheet.create
中去改,即使代碼寫在一行內也簡短不顯得臃腫.
安裝
npm install react-native-gp-style --save
如何使用
首先導入插件
導入插件的三種方式(侵入方式的三個等級,根據情況選擇其中一種方式導入)
先導入插件
import Styles from 'react-native-gp-style';
然後根據情況(看下面的三種方式的優缺點)選擇下面的一種方式使用插件.
- 非侵入式(侵入等級0):
let {s,sf}=new Styles(0);
或自定義名稱
let {s:styles,sf:styleFunctions}=new Styles(0);
- 部分侵入式(侵入等級1,推薦):
new Styles(1);
或自定義名稱
new Styles(1,'styles','styleFunctions');
- 完全侵入式(侵入等級2):
new Styles(2);
或自定義名稱
new Styles(2,'styles');
怎樣使用
像上面一樣導入之後有兩個變量s,sf(侵入式導入的話存放在global全局變量中).
s是一個對象,這個對象中以簡單的鍵名key對應到一個固定的樣式.
-- 比如s.center
對應的是子組件水平,垂直居中的樣式{justifyContent:'center',alignItems:'center'}
.
-- 比如s.w
對應的是當前設備的寬度(侵入式等級2時,直接w){width:Dimensions.get('window').width}
.sf也是一個對象,這個對象中以簡單的鍵名key對應到一個獲取樣式的方法.可以通過調用這些方法,傳入方法參數,獲得對應的樣式.
-- 比如sf.swh(100,200)
就獲取到寬100,高200的樣式(可以只設置一個值,此時寬高都等於這個值){width:10,height:20}
.(侵入式等級爲2時直接swh(10,20)
).
-- 比如sf.spad(10,20,30,40)
就獲得內間距上10,右20,下30,左40的樣式{paddingTop:10,paddingRight:20,paddingBottom:30,paddingLeft:40}
.(可以給出1-4個參數,根據局不同參數個數設置不同內間距,就和在css中一樣的效果)
如果一個view要同時具有上面舉例的這些樣式屬性的時候就只需要這樣<View style={[s.center,s.w,sf.swh(100,200),sf.spad(10,20,30,40)]}></View>
如果不喜歡s,sf這兩個名稱的話,可以像上面一樣自定義這兩個變量名的名稱,上面就把這兩個變量名改爲了styles,styleFunctions,大家可以根據自己的需要自定義名稱,上面只是演示,自定義名稱的話應該儘量的短小.
三種導入方式的優缺點:
- 0->非侵入式導入:
-- 優點:不佔用任何一個全局變量,不會造成全局變量污染.IDE中可以通過s.,sf.來獲得屬性名,方法名,方法參數的提示
-- 缺點:每個需要用到的文件中都要import,new一次.每個樣式屬性名,樣式方法名前面都要寫s.,sf.比較麻煩.如果你自己取更長的別名的話可能使代碼變長
- 1->部分侵入式導入:
-- 優點:只用在主入口文件(可能是index.js,index.ios.js,index.android.js,Main.js等等,具體看自己的情況)中import,new一次,以後就可以在項目中的所有文件使用.IDE中可以通過s.,sf.來獲得屬性名,方法名,方法參數的提示
-- 缺點:會佔用s,sf(或者你自定義的名稱)的兩個全局變量.每個樣式屬性名,樣式方法名前面都要寫s.,sf.比較麻煩. - 2->完全侵入式導入:
-- 優點:只用在主入口文件中import,new一次,以後就可以在項目中的所有文件使用.調用設置樣式的方法時不用再sf.spad(15),直接spad(15).獲得屏幕的寬高直接w,h,而不用s.w,s.h,預置背景色,顏色,flex佈局等也是直接寫.簡單方便.
-- 缺點:會佔用s,以及一系列s開頭的方法的全局變量,以及一系列顏色,flex佈局,寬高樣式相關的全局變量,造成全局變量污染.IDE中不能用sf.來獲得方法名,方法參數的提示,對方法名不熟悉的話也會造成一定的困擾.
樣式屬性一覽表(即上面的s對象中的鍵值對):
爲了方便大家不同的習慣,有的相同的樣式屬性會有不同的鍵名,比如讓子組件水平,垂直居中的樣式屬性,可以s.center
(見名知意,但略長),也可以直接s.c
(超級短,但不瞭解的人根本不知道這是啥).
固定部分,下面部分的內容所有侵入式級別都是通過s.center
這樣的形式調用
key(樣式屬性鍵名) | value(對應的樣式屬性) | 解釋 |
---|---|---|
---------------- | 對子組件的佈局方式部分 | ---------------- |
spaceB或spaceBetween或sB | {justifyContent:"space-between"} | 讓子組件向兩邊分開 |
spaceA或spaceAround或sA | {justifyContent:"space-around"} | 讓子組件向兩邊分開,並且左右留間距 |
row | {flexDirection:'row'} | 讓View子組件橫向排布(默認縱向) |
wrap | {flexWrap:'wrap'} | 超出部分子組件換行 |
---------------- | 對子組件的對齊方式部分 | ---------------- |
center或c | {justifyContent:'center',alignItems:'center'} | 讓子組件水平,豎直都居中 |
aliCenter或aliC | {alignItems:'center'} | 讓子組件在次軸方向上居中對齊 |
aliEnd或aliE | {alignItems:"flex-end"} | 讓子組件在次軸方向上向尾部對齊 |
justCenter或justC | {justifyContent:'center'} | 讓子組件在主軸方向上居中對齊 |
justEnd或justE | {justifyContent:"flex-end"} | 讓子組件在主軸方向上向尾部對齊 |
---------------- | 對自身組件相對父組件的對齊方式部分 | ---------------- |
aliSelfStart或aliSS | {alignSelf:'flex-start'} | 對齊父組件頭部 |
aliSelfCenter或aliSC | {alignSelf:'center'} | 相對父組件居中對齊 |
aliSelfEnd或aliSE | {alignSelf:'flex-end'} | 對齊到父組件的尾部 |
---------------- | 絕對定位,相對定位部分 | ---------------- |
rel | {position:'relative'} | 設置組件爲相對定位 |
abs | {position:'absolute'} | 設置組件爲絕對定位 |
absTop或absT | {position:'absolute',top:0} | 設置組件爲絕對定位,並定位在父組件最頂部 |
absBottom或absB | {position:'absolute',bottom:0} | 設置組件爲絕對定位,並定位在父組件最底部 |
absLeft或absL | {position:'absolute',left:0} | 設置組件爲絕對定位,並定位在父組件左方 |
absRight或absR | {position:'absolute',right:0} | 設置組件爲絕對定位,並定位在父組件右方 |
---------------- | 圖片樣式部分 | ---------------- |
cover | {resizeMode:'cover'} | 圖片以剛好佔滿指定寬高的形式顯示 |
contain | {resizeMode:'contain'} | 圖片以剛好能在指定寬高內顯示完整的形式顯示 |
---------------- | 文字樣式部分 | ---------------- |
textCenter或tC | {textAlign:'center'} | 文字居中對齊顯示 |
textLeft或tL | {textAlign:'left'} | 文字靠左對齊顯示 |
textRight或tR | {textAlign:'right'} | 文字靠右對齊顯示 |
---------------- | 寬高樣式部分 | ---------------- |
w或width | {width:Dimensions.get('window').width}, | 當前屏幕寬度 |
h或height | {height:Dimensions.get('window').height} | 當前屏幕高度 |
w100 | {width:'100%'} | 和父組件等寬 |
h100 | {height:'100%'} | 和父組件等高 |
wh100 | {width:'100%',height:'100%'} | 和父組件等寬等高 |
wh0 | {width:0,height:0} | 沒有尺寸的寬高樣式 |
whAll | whAll:{width:w,height:isios?h:h-25} | 佔滿整個屏幕的寬高樣式 |
---------------- | 其他常用樣式屬性部分 | ---------------- |
hidden | {overflow:'hidden'}, | 超出組件範圍內容隱藏 |
show或visible | {overflow:'visible'} | 超出組件範圍內容顯示 |
opa0 | {opacity:0}, | 透明度0 |
多個常用樣式部分,下面的樣式在侵入式等級0和1下依然是s.f3
(表示{flex:3})這樣調用,在侵入式等級2下直接f3
這樣調用.
- 一系列的flex佈局部分:
s.f1到s.f12分別對應{flex:1}到{flex:12}
- 一系列的由白到黑的灰色背景顏色,文字顏色:
s.bg000,s.bg111一直到s.bgeee,s.bgfff分別對應由黑{backgroundColor:'#000'}到白{backgroundColor:''#fff}的灰色背景顏色
s.c000,s.c111一直到s.ceee,s.cfff則分別對應由黑{color:'#000'}到白{color:''#fff}的灰色文字顏色
- 一系列由屏幕寬高按比例計算出來的常用寬高的值:
以屏幕寬高375,667爲例.
比如h1,w1就分別爲375,667.h2,w2就分別爲187.5,333.5.(這裏的1,2就是對對屏幕寬高的除數,預設的值有[1,2,3,4,5,6,7,8,9,10,11,12,16,32,64,128]).
注意:這裏得到的是屏幕的屏幕寬高比例算出來的數值,而非樣式,使用時應該sf.sw(w12),sf.sh(h3)這樣使用.
樣式方法一覽表(即上面的sf對象中的方法)
和上面一樣,相同的方法可能會給出多個對應的鍵名.(爲了以侵入式等級2導入使用時儘量的不與全局變量衝突,所以所有方法名(鍵名)前面都加有一個s)
下面的所有方法,在侵入式0和1中都是通過sf.sw(100)
方式來調用,在侵入式等級2中都是直接通過方法名調用sw(100)
key(樣式方法鍵名) | 對應的樣式方法的解釋 | 對應的樣式方法的使用範例(爲方便以侵入式2爲例) |
---|---|---|
---------------- | 寬高樣式方法部分 | ---------------- |
sw或swidth | 通過給定的寬度數值設置寬度 | sw(100)設置寬度爲100 |
sh或sheight | 通過給定的高度數值設置高度 | sh(h2)設置高度爲屏幕高度的一半 |
swh | 通過給定的寬度/高度數值同時設置寬度/高度(只給出一個時設置寬高爲相同的數值) | swh(100,200),設置寬100,高200;swh(100),設置寬高都爲100 |
---------------- | 邊框樣式方法部分 | ---------------- |
sbw或sborderWidth | 設置邊框的寬度爲指定的值 | sbw(2),設置邊框寬爲2 |
sbc或sborderColor | 設置邊框顏色爲指定顏色 | sbc('#f90'),設置邊框顏色爲橙色 |
sbr或sborderRadius | 設置邊框圓角爲指定大小 | sbr(50),設置邊框大小爲50 |
sb或sborder | 統一設置邊框的常用屬性 | sb('#f90',50,2),設置邊框顏色爲橙色,圓角爲50,寬度爲2.第三個參數寬度,默認值爲1 |
---------------- | 內間距樣式方法部分 | ---------------- |
spadT或spadTop | 設置上內間距爲指定數值 | spadT(100),設置上內間距爲100 |
spadB或spadBottom | 設置下內間距爲指定數值 | 和上面一樣 |
spadV或spadVertical | 設置豎直方向(上下)內間距爲指定數值 | 和上面一樣 |
spadL或spadLeft | 設置左內間距爲指定數值 | 和上面一樣 |
spadR或spadRight | 設置右內間距爲指定數值 | 和上面一樣 |
spadH或spadHorizontal | 設置水平方向(左右)內間距爲指定數值 | 和上面一樣 |
spad或spadAll | 上下左右方向的內間距一起設置,參數可以是1到4位,和css中一樣,給出1位參數時表示上下左右內間距都設置爲該值;2位時豎直方向內間距爲第1位參數的值,水平方向內間距爲第2位參數的值;3位參數時水平方向內間距爲第2位參數的值,上下方向內間距分別爲第1,3位參數的值;4位參數時第1,2,3,4爲參數分別對應上右下左方向的內間距值 | spad(10),上下左右內間距都爲10;spad(10,20),豎直方向內間距10,水平方向20;spad(10,20,30),水平方向內間距20,上10,下30;spad(10,20,30,40),上右下左方向的內間距值分別爲10,20,30,40 |
---------------- | 外間距樣式方法部分 | ---------------- |
smarT或smarTop | 設置組件距離上面的距離爲指定的數值 | smarT(100),設置組件距離上面距離爲100 |
smarB或smarBottom | 設置組件距離下面的距離爲指定的數值 | 和上面一樣 |
smarV或smarVertical | 設置組件距離上下的距離爲指定的數值 | 和上面一樣 |
smarL或smarLeft | 設置組件距離左面的距離爲指定的數值 | 和上面一樣 |
smarR或smarRight | 設置組件距離右邊的距離爲指定的數值 | 和上面一樣 |
smarH或smarHorizontal | 設置組件距離左右的距離爲指定的數值 | 和上面一樣 |
smar或smarAll | 上下左右的外間距一起設置 | 和spad方法一樣 |
---------------- | 絕對定位樣式方法部分 | ---------------- |
sabsT或sabsTop | 設置組件爲絕對定位,並距離父組件頂部指定高度 | sabs(10),組件絕對定位,並距離父組件頂部距離10 |
sabsB或sabsBottom | 設置組件爲絕對定位,並距離父組件底部指定高度 | 同上 |
sabsL或sabsLeft | 設置組件爲絕對定位,並距離父組件左邊指定寬度 | 同上 |
sabsR或sabsRight | 設置組件爲絕對定位,並距離父組件右邊指定寬度 | 同上 |
sabsAll | 設置組件爲絕對定位,並佔滿整個父組件(沒有參數時),可以給出1到4個參數分別表示距離父組件的上右下左的距離 | sabs(10,15,20,25),設置該組件爲絕對定位,並佔滿父組件後距離父組件上右下左距離分別爲10,15,20,25 |
---------------- | 相對定位樣式方法部分 | ---------------- |
srelT或srelTop | 設置組件爲相對定位,並距離自身原本位置向上擠出指定的距離 | srelT(100),組件相對定位,並距離自身原本位置向上擠出距離100 |
srelB或srelBottom | 設置組件爲相對定位,並距離自身原本位置向下擠出指定的距離 | 同上 |
srelL或srelLeft | 設置組件爲相對定位,並距離自身原本位置向左擠出指定的距離 | 同上 |
srelR或srelRight | 設置組件爲相對定位,並距離自身原本位置向右擠出指定的距離 | 同上 |
---------------- | 絕對定位或相對定位時設置上下左右的距離 | ---------------- |
sT或sTop | 上 | sT(10) |
sB或sBottom | 下 | |
sL或sL | 左 | |
sR或sRight | 右 | |
spos或sposition | 上下左右一起設置 | spos({t:100,b:70,l:50,r:80}),上線左右距離分別爲100,70,50,80;可以只設置其中任意多個屬性spos({t:50,l:30}) |
---------------- | 文字樣式方法部分 | ---------------- |
sc或scolor | 設置文字顏色爲指定顏色 | sc('#f90'),設置背景色爲橙色 |
sfz或sfontSize | 設置文字大小爲指定大小 | sfz(20),設置文字大小爲20 |
slh或slineHeight | 設置文字行高爲指定高度 | slh(40),設置文字行高爲40 |
sff或sfontFamily | 設置文字字體爲指定字體 | sff('PingFangSC-Light'),設置文字字體爲'PingFangSC-Light' |
stext | 統一設置文字所有常用屬性,stext(大小,顏色,行高,字體,是否背景色透明(老版本文字有時會有默認背景色)) | stext(20,'#fff',40,'PingFangSC-Light',true),設置字體大小20,顏色白色,行高40,字體PingFangSC-Light,背景色透明(老版本文字有時會有默認背景色),可以給出任一多個參數,沒有給出的默認系統樣式 |
---------------- | 其他常用樣式方法部分 | ---------------- |
sop或sopacity | 設置透明度爲指定數值 | sop(0.5),設置透明度爲0.5 |
sbgc | 設置背景色爲指定的顏色 | sbgc('#f90'),設置背景色爲橙色 |
拓展與進階
樣式的重用
可能大家會想到樣式的重用性問題,可能一個樣式會用到多個View上,這也是沒有問題的.
在標準方法中的樣式重用
const styles=StyleSheet.create({
container:{
padding:15,
width:Dimensions.get('window').width,
backgroundColor:'#999',
marginTop:100,
},
})
<View style={[styles.container]}></View>
在插件中可以這樣用
let containerStyle=[sf.spad(15),sf.sw(s.w),s.bg999,sf.smarT(100)];
<View style={[containerStyle]}></View>
如果多個界面都想用到這個樣式的話,在侵入式等級1,2中可以直接
s.containerStyle=[sf.spad(15),sf.sw(s.w),s.bg999,sf.smarT(100)];
這樣在其他所有界面就可以這樣使用樣式了
<View style={[s.containerStyle]}></View>
添加新的自定義樣式
這裏我只寫入了一些我常用到的樣式屬性和樣式方法,如果有一些你用到的常用的屬性或方法裏面沒有的話也沒有關係,直接向其中加入就可以了.
在導入插件後,如果需要新增樣式屬性可以直接
s.center={justifyContent:'center',alignItems:'center'}
如果需要新增樣式方法可以直接
sf.sw=(w)=>{return {width:w}}
或者直接在插件源碼中增添,修改都是可行的方法.
(↓ˉ▽ˉ↓)
如果大家覺得我的組件好用的話,幫到你的話,歡迎大家Star,Fork,如果有什麼問題的話也可以在github中想我提出,謝謝大家的支持.