属于应用框架层应用,其中 Colors,也需要自己的抽离。后续我将上传自己的Color和系统工具类
用这套style,能使您的开发效率提高百分之二十,毫不夸张,您只要习惯用,一直用一直爽。
'use strict';
import React, {
StyleSheet,
Dimensions,
Platform,
PixelRatio,
} from 'react-native';
import Colors from './Colors';
import Util from './../mixins/Utils';
var window = Dimensions.get('window');
export var border_w = StyleSheet.hairlineWidth; //border宽度
export var screen_w = window.width; //屏幕宽度
export var screen_h = window.height; //屏幕高度
export var spacing_num = 10; //两边间距
export let ratio_num = screen_w / 414;//屏幕比例
export let ratio_num_6 = screen_w / 375;//屏幕比例
var internal_w = screen_w - spacing_num*2;//容器内部宽度
var equal2_w = parseInt(internal_w/2);//容器内部2等分宽度
var equal3_w = parseInt(internal_w/3);//容器内部3等分宽度
export const defaultPixel = 3;//iphone6的像素密度
//px转换成dp
// const scale = Math.min(screen_w / 375, screen_h / 667);//获取缩放比例(ui ->iphone6)
const scale = ratio_num;//获取缩放比例(ui ->iphone6p)
export function setSpText(size) {
//14-》iphone一倍屏12,二倍屏13,三倍瓶14
size = Math.round(((size * scale)+(defaultPixel*(defaultPixel-Util.ratio)))* Util.ratio / Util.fontScale);
return size / defaultPixel;
}
export function scaleSize(size) {
size = Math.round(size * scale+(defaultPixel*(defaultPixel-Util.ratio))* Util.ratio / Util.fontScale);
return size / defaultPixel;
}
export var header_h = Math.round(scaleSize(180));
export var bottombar_h = Math.round(scaleSize(180));
export var spacing = Math.round(scaleSize(spacing_num*3));
const styles = StyleSheet.create({
//常用
container:{
flex:1,
backgroundColor:'#614829'
},
hr:{
height:StyleSheet.hairlineWidth,backgroundColor:Colors.border},//横线
vr:{
borderRightWidth:StyleSheet.hairlineWidth,borderRightColor:Colors.border},//竖线
vl:{
borderLeftWidth:StyleSheet.hairlineWidth,borderLeftColor:Colors.border},//竖线
//>=rn0.43才支持
vr_n:{
width:StyleSheet.hairlineWidth,height:'100%',backgroundColor:Colors.border},//竖线(早期版本不支持百分比)
//none:{display:'none'},
a_b:{
borderWidth:1,borderColor:Colors.border},//边框
a_d2:{
borderWidth:1,borderColor:Colors.drak_translucent2},
l_b:{
borderBottomWidth:StyleSheet.hairlineWidth,borderBottomColor:Colors.border_translucent},//底线
l_t:{
borderTopWidth:StyleSheet.hairlineWidth,borderTopColor:Colors.border_translucent},//顶线
l_r:{
borderRightWidth:StyleSheet.hairlineWidth,borderRightColor:Colors.border_translucent},//右边线
l_l:{
borderLeftWidth:StyleSheet.hairlineWidth,borderLeftColor:Colors.border_translucent},//左边线
a_bp:{
borderWidth:StyleSheet.hairlineWidth,borderColor:Colors.border},//边框
b_t:{
borderTopWidth:StyleSheet.hairlineWidth,borderTopColor:Colors.border},//顶部边
b_l:{
borderLeftWidth:StyleSheet.hairlineWidth,borderLeftColor:Colors.border},//左侧边
b_r:{
borderRightWidth:StyleSheet.hairlineWidth,borderRightColor:Colors.border},//右侧边
b_b:{
borderBottomWidth:0.5,borderBottomColor:Colors.border},//底部边
s_w:{
width:screen_w},
s_h:{
height:screen_h},
cl1:{
width:internal_w},
cl2:{
width:equal2_w},
cl3:{
width:equal3_w},
w_p:{
width:'100%'},
h_p:{
height:'100%'},
b:{
fontWeight:'bold'},
p:{
color:Colors.deep,
lineHeight:Math.round(setSpText(84)),
textAlign:'justify',
fontSize:setSpText(51),
paddingHorizontal:10,
paddingTop:5,
paddingBottom:30
},//段落
img:{
},
bg_color:{
backgroundColor:Colors.bg_color},
bg_white:{
backgroundColor:Colors.white},
bg_black:{
backgroundColor:Colors.black},
bg_dark:{
backgroundColor:Colors.dark},
bg_white1:{
backgroundColor:Colors.white1},
bg_yellow:{
backgroundColor:Colors.yellow},
bg_red:{
backgroundColor:Colors.red},
bg_skyblue:{
backgroundColor:Colors.skyblue},
bg_page:{
backgroundColor:Colors.page_bg},
bg_pink:{
backgroundColor:Colors.pink},
bg_gray:{
backgroundColor:Colors.gray},
bg_purple:{
backgroundColor:Colors.purple},
bg_orange:{
backgroundColor:Colors.orange},
bg_border:{
backgroundColor:Colors.border},
bg_lightyellow:{
backgroundColor:Colors.lightyellow},
bg_middleyellow:{
backgroundColor:Colors.middleyellow},
bg_main:{
backgroundColor:Colors.main},
bg_searchred:{
backgroundColor: