移动端：RN 基础样式 commonStyle

最新推荐文章于 2023-11-20 16:06:37 发布
最新推荐文章于 2023-11-20 16:06:37 发布
阅读量404 收藏
点赞数
文章标签： RN react-native 移动端适配 兼容性问题
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_27401917/article/details/100039141
版权 
/**
 * Created by 01 on 2016/10/26.
 */
import React, { Component } from 'react';
import {
    StyleSheet,View,Image,Text,TouchableOpacity,Dimensions
    } from 'react-native';

//屏幕尺寸
export const [sizeWidth,sizeHeight,px]=[
    Dimensions.get('window').width,//屏幕宽度
    Dimensions.get('window').height == 812 ?667 : Dimensions.get('window').height , //屏幕高度
    sizeHeight/1334
]

//公共样式
export const commonStyles=StyleSheet.create({
    abs:{position:'absolute'},
    rel:{position:'relative'},
    row:{flexDirection:'row'},
    column:{flexDirection:'column'},
    flex:{flex:1},
    left:{alignSelf:'flex-start'},
    right:{alignItems:'flex-end'},
    center:{alignItems:'center'},
    start:{justifyContent:'flex-start'},
    vertical:{justifyContent:'center'},
    between:{justifyContent:'space-between'},
    end:{justifyContent:'flex-end'},
    fz9:{fontSize:9*px},
    fz10:{fontSize:10*sizeHeight/1334},
    fz11:{fontSize:11*sizeHeight/1334},
    fz12:{fontSize:12*sizeHeight/1334},
    fz13:{fontSize:13*sizeHeight/1334},
    fz14:{fontSize:14*sizeHeight/1334},
    fz15:{fontSize:15*sizeHeight/1334},
    fz16:{fontSize:16*sizeHeight/1334},
    fz18:{fontSize:18*sizeHeight/1334},
    fz20:{fontSize:20*sizeHeight/1334},
    fz22:{fontSize:22*sizeHeight/1334},
    fz24:{fontSize:24*sizeHeight/1334},
    fz26:{fontSize:26*sizeHeight/1334},
    fz28:{fontSize:28*sizeHeight/1334},
    fz30:{fontSize:30*sizeHeight/1334},
    fz32:{fontSize:32*sizeHeight/1334},
    fz34:{fontSize:34*sizeHeight/1334},
    fz36:{fontSize:36*sizeHeight/1334},
    fz40:{fontSize:40*sizeHeight/1334},
    white:{color:'#fff'},
    black:{color:'#000'},
    gray:{color:'#808080'},
    color3:{color:'#333'},
    color6:{color:'#666'},
    color9:{color:'#999'},
    colorc:{color:'#cccccc'},
    mainColor:{color:'#a49568'},
    bold:{fontWeight:'700'},
    normal:{fontWeight:'400'},
    mt0:{marginTop:0},
    mt6:{marginTop:6*sizeHeight/1334},
    mt9:{marginTop:9*sizeHeight/1334},
    mt10:{marginTop:10*sizeHeight/1334},
    mt12:{marginTop:12*sizeHeight/1334},
    mt15:{marginTop:15*sizeHeight/1334},
    mt20:{marginTop:20*sizeHeight/1334},
    mt25:{marginTop:25*sizeHeight/1334},
    mt30:{marginTop:30*sizeHeight/1334},
    mt28:{marginTop:28*sizeHeight/1334},
    mt35:{marginTop:35*sizeHeight/1334},
    mb0:{marginBottom:0},
    mb1:{marginBottom:1*sizeHeight/1334},
    mb6:{marginBottom:6*sizeHeight/1334},
    mb9:{marginBottom:9*sizeHeight/1334},
    mb10:{marginBottom:10*sizeHeight/1334},
    mb12:{marginBottom:12*sizeHeight/1334},
    mb15:{marginBottom:15*sizeHeight/1334},
    mb20:{marginBottom:20*sizeHeight/1334},
    mb25:{marginBottom:25*sizeHeight/1334},
    mb30:{marginBottom:30*sizeHeight/1334},
    mb35:{marginBottom:35*sizeHeight/1334},
    ml6:{marginLeft:6*sizeWidth/750},
    ml10:{marginLeft:10*sizeWidth/750},
    ml12:{marginLeft:12*sizeWidth/750},
    ml15:{marginLeft:15*sizeWidth/750},
    ml20:{marginLeft:20*sizeWidth/750},
    ml25:{marginLeft:25*sizeWidth/750},
    ml35:{marginLeft:35*sizeWidth/750},
    ml48:{marginLeft:48*sizeWidth/750},
    mr0:{marginRight:0*sizeWidth/750},
    mr6:{marginRight:6*sizeWidth/750},
    mr10:{marginRight:10*sizeWidth/750},
    mr12:{marginRight:12*sizeWidth/750},
    mr15:{marginRight:15*sizeWidth/750},
    mr20:{marginRight:20*sizeWidth/750},
    mr25:{marginRight:25*sizeWidth/750},
    mh10:{marginHorizontal:10*sizeWidth/750},
    mh20:{marginHorizontal:20*sizeWidth/750},
    mv10:{paddingVertical:10*sizeHeight/1334},
    mv20:{paddingVertical:20*sizeHeight/1334},
    mv30:{paddingVertical:30*sizeHeight/1334},
    pl10:{paddingLeft:10*sizeWidth/750},
    pl12:{paddingLeft:12*sizeWidth/750},
    pl15:{paddingLeft:15*sizeWidth/750},
    pl20:{paddingLeft:20*sizeWidth/750},
    pr10:{paddingRight:10*sizeWidth/750},
    pr12:{paddingRight:12*sizeWidth/750},
    pr20:{paddingRight:20*sizeWidth/750},
    pt10:{paddingTop:10*sizeHeight/1334},
    pt12:{paddingTop:12*sizeHeight/1334},
    pt15:{paddingTop:15*sizeHeight/1334},
    pt20:{paddingTop:20*sizeHeight/1334},
    pt30:{paddingTop:30*sizeHeight/1334},
    pb10:{paddingBottom:10*sizeHeight/1334},
    pb12:{paddingBottom:12*sizeHeight/1334},
    pb15:{paddingBottom:15*sizeHeight/1334},
    pb20:{paddingBottom:20*sizeHeight/1334},
    pb30:{paddingBottom:30*sizeHeight/1334},
    pb40:{paddingBottom:40*sizeHeight/1334},
    ph0:{paddingHorizontal:0},
    ph10:{paddingHorizontal:10*sizeWidth/750},
    ph20:{paddingHorizontal:20*sizeWidth/750},
    pv10:{paddingVertical:10*sizeHeight/1334},
    pv20:{paddingVertical:20*sizeHeight/1334},
    pv30:{paddingVertical:30*sizeHeight/1334},
    p10:{padding:10*sizeHeight/1334},
    p12:{padding:12*sizeHeight/1334},
    p20:{padding:20*sizeHeight/1334},
    lh18:{lineHeight:18*sizeHeight/1334},
    bg0:{backgroundColor:'#000'},
    bgc:{backgroundColor:'#ccc'},
    bgf:{backgroundColor:'#fff'},
    bgm:{backgroundColor:'#a49568'},
    bgeb:{backgroundColor:'#ebe8de'},
    bgf4: {backgroundColor: '#f4f4f4'},
    border:{ borderWidth:1*sizeWidth/750, borderStyle:'solid' },
    borderC:{ borderColor:'#ccc'},
    borderF:{borderColor:'#fff'},
    borWhite:{
        borderWidth:1,
        borderStyle:'solid',
        borderColor:'#a49568'
    },
    topbor:{borderTopWidth:1*sizeHeight/1334,borderColor:'#ccc'},
    btmbor:{borderBottomWidth:1*sizeHeight/1334,borderColor:'#ccc'},
    bor:{borderWidth:1*sizeHeight/1334,borderColor:'#a49569'},

    //弹出框背景
    popupStyle:{
        width:320*sizeWidth/750,
        height:160*sizeHeight/1334,
        alignItems:"center",
        justifyContent:"center",
        borderRadius:4,
        backgroundColor:'rgba(0,0,0,0.7)'
    },
    //ͨ通栏按钮 主色背景
    btnM:{height:90*sizeHeight/1334,backgroundColor:'#a49569'},
    //主材列表货物状态
    arrivalBtn:{
        width:90*sizeWidth/750,
        height:36*sizeHeight/1334,
        alignItems:'center',
        justifyContent: 'center',
        borderRadius:2*sizeHeight/1334
    },
    pt34:{paddingTop:34*sizeHeight/1334},
    mt38:{marginTop:38*sizeHeight/1334},
    flexWrap:{flexWrap: 'wrap'},
    bgShade: {backgroundColor: 'rgba(0,0,0,0.5)'},
    mR25: {marginRight: 25 * sizeWidth / 750},
    mt50: {marginTop: 50 * sizeHeight / 1334},
    mt60: {marginTop: 60 * sizeHeight / 1334},
    mb40: {marginBottom: 40 * sizeHeight / 1334},
    borderEC: {borderColor: "#ececec"},
    mt40:{marginTop:40*sizeHeight/1334},
    mb60:{marginBottom:60*sizeHeight/1334},
    ml100:{marginLeft:100*sizeWidth/750},
    color0:{color:'#000000'},
    mt3:{marginTop:3*sizeHeight/1334},
    ml5:{marginLeft:5*sizeWidth/750},
    mt5:{marginTop:5*sizeHeight/1334},
    pl30:{paddingLeft:30*sizeWidth/750},
    pr30:{paddingRight:30*sizeWidth/750},
    pt28:{paddingTop:28*sizeHeight/1334},
    pt18:{paddingTop:18*sizeHeight/1334},
    ph15:{paddingHorizontal:15*sizeWidth/750},
    fz48:{fontSize:48*sizeHeight/1334},
    ml30:{marginLeft:30*sizeWidth/750},
    mr30:{marginRight:30*sizeWidth/750},
    ml40:{marginLeft:40*sizeWidth/750},
    mr40:{marginRight:40*sizeWidth/750},
    mr45:{marginRight:45*sizeWidth/750},
    ml60:{marginLeft:60*sizeWidth/750},
    closeStyle:{
        paddingRight:40*sizeWidth/750,
        paddingTop:40*sizeHeight/1335
    },
    delayedRedColor:{color:'#BC4C44'},
    pt50:{paddingTop:50*sizeHeight/1334},
    pt116:{paddingTop:116*sizeHeight/1334},
    pt40:{paddingTop:40*sizeHeight/1334},
    mt33:{marginTop:33*sizeHeight/1334},
});
望京十三兄
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
移动端跨平台开发之RN模块化以及技术实现——React Native热门话题解析
禅与计算机程序设计艺术
09-07 379
作者：禅与计算机程序设计艺术 1.简介 随着移动互联网的蓬勃发展，传统WEB应用的性能、体验受到了越来越多人的追捧。但在这样的背景下，移动端也开始了自己的蓬勃发展时期。如今，React Native已经成为当下最火的移动端跨平台开发框架。React Native由Facebook推出，支持Android
rn-charts:rn图表库
05-17
基于svg的react native图表库 环形图 6-10 扇形图 6-20 折线图 7-10 柱状图 7-20 雷达图 7-30 漏斗图 8-10 集装箱图 8-20 legent配置 方位 四个顶点(leftTop leftBottom rightTop rightBottom) ...
移动端css公共样式
weixin_30835933的博客
08-07 168
@charset "utf-8"; /* 禁用iPhone中Safari的字号自动调整 */ html { -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; /* 解决IOS默认滑动很卡的情况 */ -webkit-overflow-scrolling : touch; } ...
Rn搭建移动端App开发环境
明知山
06-21 575
直接推荐使用官方文档的搭建开发环境 文档说明的已经很细致了 这里主要注意的是安装Android Studio模拟机的问题，这里官方文档没有着重说明 选择模拟器 选择一个进行Download API Level对应你下载的android sdk版本 Finish安装 下载haxm 点击运行会让你安装haxm installer 你需要去Github官方地址去下载 开启虚拟化 下载安装会提示你VT开启虚拟化技术 检测你是否开启了虚拟化 没有开启是安装不了的，需要去BIOS中开启，这里推荐查看 360操作说
新的移动端基础样式css
YingDaoMonkey的博客
08-28 621
@charset "utf-8"; /* 禁用iPhone中Safari的字号自动调整 */ html{ -webkit-text-size-adjust:100%; /* 解决IOS默认滑动很卡的情况 */ -ms-text-size-adjust:100%; -webkit-overflow-scrolling:touch; } /* 禁止缩放表单 */ i...
移动端基础
smile54533的博客
06-04 219
1/ 开发自适应/响应式页面 2/ 开发移动web页面 3/ 开发移动端的特效 4/ 掌握移动端开发技巧以及优化 移动端基础： 了解移动端产品分类及现状 会调试移动端项目 会使用viewport视口标签定义理想窗口 会使用em布局网页 会使用rem布局网页 什么是移动web 移动web 运行在移动设备上的产品 移动设备包括： 手机/平板/其他的一些手持...
RN:RN原始码和编译结果
03-23
启动项目 $ npm i // run Android | ios project $ npm start // run web project $ npm run web 更改src/App.js来切换demo
AwesomeProject:RN项目脚手架
05-04
很棒的项目RN项目脚手架
Mchat：RN生态学习
02-25
开始 毛线或npm安装 纱线模拟 react-native链接（包名称）//已经链接请忽略 react-native run-ios（运行Android） 简介 这个分区是用dva建造的，主要是学习用，以及版本的转换升级。master为为手动搭建，技术栈也...
react-native:RN项目框架
05-03
react-native 搭建的一个简单的RN 项目框架，api基于0.51
移动端常用样式以及特效
03-24
常用样式你值得拥有
reactnativecommonStyleSheet封装一个基于UI标准的公用样式表
08-12
react-native-commonStyleSheet 封装一个基于UI标准的公用样式表
JueJinClient采用reactnative开发仿简书的移动端项目
08-10
JueJinClient - 采用react-native开发仿简书的移动端项目。可运行在Android和iOS平台之上。
ReactNative之搭建环境
热门推荐
吴小迪的博客
09-12 1万+
今天就帮助大家想做RN开发的朋友们整理一下搭建环境的步骤， 本文是根据官方文档整理的，只是本文会讲的更俗一点。 官方文档链接： 中文：https://reactnative.cn/docs/getting-started.html 英文：https://facebook.github.io/react-native/ 首先要看朋友们是要开发Android还是iOS，如果是Android的话那么...
【css】【汇总】写在公共样式内的常用样式
康一夏忙中偷闲的日子
05-28 360
ellipse 单行超长，多行超长 省略号显示 webkit-scrollbar 滚动条样式覆盖 移动端常用机型适配 flex布局（兼容常用浏览器） 常用css效果，建议在建应用时，写在类似common.style的公共样式内，方便统一使用 ellipse // 单行超长 省略号显示 .ellipse white-space nowrap overflow hidden text-overflow ellipsis
RN是React Native的缩写，是一种基于React的跨平台移动应用开发框架。使用RN，开发者可以用JavaScript和React语法来开发iOS和Android的原生应用，同时拥有更高的开发
最新发布
m0_58584389的博客
11-20 674
开源框架，是react的一个原生（native）扩展。允许通过react语法开发ios及android原生应用。混合开发 混合app react native | weex | flutter。原生开发 原生app android | ios | windows。中文网：https://www.reactnative.cn/开发一次，可以生成android和ios两个系统上的app。官网：https://reactnative.dev/使用统一代码规范开发移动端程序，不用关注移动端的差异。
React RN移动端开发
www294993741的博客
12-27 1361
React RN移动端开发 文章目录React RN移动端开发了解React-Native了解React-Native工作流程ReactNative中文网(查看流程和必须)创建第一个React-Native项目了解React-Native项目及结构开发资料配置reactnative文件模板项目开发路由(react-native-router-flux)开发组件(swiper)替换swiper中条目...
移动端基础篇
无知者无畏
04-26 429
移动端基础 图片格式： DPG图片压缩技术 京东自主研发推出DPG图片压缩技术，经测试该技术，可直接节省用户近50%的浏览流量，极大的提升了用户的网页打开速度。能够兼容jpeg，实现全平台、全部浏览器的兼容支持，经过内部和外部上万张图片的人眼浏览测试后发现，压缩后的图片和webp的清晰度对比没有差距。 webp 图片格式 谷歌开发的一种旨在加快图片加载速度的图片格式。图片压缩体积大约只...
RN stylesheet
块头的博客
02-23 990
/**  * Sample React Native App  * https://github.com/facebook/react-native  * @flow  */ import React, { Component } from 'react'; import {   AppRegistry,   StyleSheet,   Text,   View, }
sql中@rn:和@rn的区别
06-01
在SQL中，@rn: 和 @rn 之间的区别是： - @rn: 表示一个命名参数，通常用于动态查询中，以便在查询中使用该参数。例如，SELECT * FROM table WHERE column = :parameter_name。在这种情况下，@rn: 就是参数名称，...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值