基于react-native做的屏幕适配加样式抽离工具类,代码抽离的更加简化,效率至少提升百分之二十

本文介绍了一种基于React-Native的屏幕适配和样式抽离工具,通过使用该工具,开发者可以显著提高开发效率,达到约20%的提升。工具包括Colors和系统工具类的抽离,方便在项目中直接引入并使用。
摘要由CSDN通过智能技术生成

属于应用框架层应用,其中 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:
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值