以最簡單的方式編寫樣式代碼,拋棄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

安裝

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這樣的形式調用

多個常用樣式部分,下面的樣式在侵入式等級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)

拓展與進階

樣式的重用

可能大家會想到樣式的重用性問題,可能一個樣式會用到多個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中想我提出,謝謝大家的支持.

react-native-pg-style使用方法(以最簡單的方式編寫樣式代碼)