RN获取屏幕高宽、自适应(rem)设置

2023-10-28

RN获取屏幕高宽、自适应(rem)设置

1、引入Dimensions
2、通过Dimensions.get(“window”).width/height; 获取屏幕高宽

pxToDp自适应js文件:
import {Dimensions} from 'react-native';
// 获取竖屏模式的宽度
const deviceWidthDp = Dimensions.get('window').width;
// UI 默认给图是750
const uiWidthPx = 750;
//传入设计稿宽度
function pxSize(uiElementPx) {
	return uiElementPx * deviceWidthDp / uiWidthPx;
}
export default pxToDp;
reactDomjs文件:
import React, {Component} from "react";
import { StyleSheet, View } from "react-native";
import pxToDp from '../res/pxToDp.js';
class reactDom extends React.Component {
    constructor(props) {
        super(props);
        this.state = {};
    }
    componentDidMount() {
        //
    }
    render() {
        return (
            <View style={styles.container}></View>
        );
    }
}
var styles = StyleSheet.create({
    container: {
        width: pxToDp(750),
        height: pxToDp(600)
    }
});
export default reactDom;
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

RN获取屏幕高宽、自适应(rem)设置 的相关文章

  • 如何修复“没有这样的文件或目录,lstat 'scss/'”?

    我正在尝试遵循 youtube 上的简单教程他尝试使用终端运行 npm 脚本 sass 文件 当我执行命令时npm 运行 sass显示错误消息错误 ENOENT 没有这样的文件或目录 lstat scss 我认为问题在于文件的路径或文件的权
  • 在 ember-cli 中安装 Foundation 5

    我对 ember 相当陌生 对构建工具也很陌生 我目前正在使用通常的基础安装以及基础 cli 和指南针来编译我的 css 这有点痛苦 并且对于团队工作来说非常糟糕 我认为用 Bower 安装文件并使用会更好ember cli compass
  • 将鼠标悬停在原点时会触发translateY()

    当您将光标移动到按钮底部时 是否可以无限期地不触发动画 它看起来是这样的 gif https i stack imgur com QwdHW gif and codepen https codepen io jaeyson pen GwwJ
  • javascript 选择自定义光标 (svg)

    我正在动态地将光标更改为悬停时的本地 svg element on mouseover function this css cursor url svgs pointer svg 9 30 auto 工作正常 但我想选择该 svg 来操纵其
  • 如何使使用 css 调整大小的图像在 IE 中看起来不错?

    当使用 css 宽度 高度或属性宽度 高度缩放图像时 IE6 和 IE7 无法很好地缩放网页中的图像 我不确定它默认使用哪种算法 但这不好 在这些浏览器中缩放时 缩放图像会显示锯齿伪影 幸运的是 有一种方法可以通过简单的 css 规则强制
  • 如何在模态打开时防止主体滚动

    我在用着W3schools 模态脚本 https www w3schools com howto tryit asp filename tryhow css modal我想添加一个功能 防止模型打开时整个主体滚动 我根据我的需要对原始脚本做
  • 使用 CSS 的响应式图像

    我发现调整图像大小以使其具有响应能力很棘手 我正在开发一个 php 应用程序来自动将网站转换为响应式版本 我有点被图像困住了 我已经成功地为网站上的每个图像添加了一个包装类 并且可以很好地调整图像的大小 我的问题在于自然小于窗口的图像 例如
  • 使用 CSS 折叠和展开元素

    我正在尝试构建一个页面 加载时仅可见标题 并且 当用户单击标题时 每个标题下方的表格会在隐藏和显示状态之间切换 我的限制是只能在 CSS 中执行此操作 这是我到目前为止想到的 https jsfiddle net Argoron c1ypx
  • 如何检测一个或多个 JS/CSS 库加载失败(例如 CDN)?

    Premise 我找到了这两个答案 但我不明白如何将它系统地应用于许多库 检测并记录外部 JavaScript 或 CSS 资源加载失败的情况 https stackoverflow com questions 5683824 detect
  • 使用反增量更改 z-index

    我尝试制作一个图像滑块 当鼠标悬停在一个点上时 它将显示图片 我也尝试使用在图像之间切换z index但什么也没动 slider counter reset index 1000 slider input name slide switch
  • 引导导航栏菜单与文本重叠

    我使用最新版本的引导程序 当我调整屏幕浏览器的大小时 使用小切换按钮下拉导航栏时 导航栏会重叠页面上的文本 而不是向下推页面内容 我已经多次研究过这个问题 我尝试将 padding bottom 放在导航栏上 将 padding top 放
  • 如何在 select2 下拉列表中换行?

    我正在使用 select 2 下拉菜单 然后在其内容中显示一些长句子 我想在句子的正确位置添加换行符 但下拉菜单是自动调整的 For example the content of the dropdown right now looks l
  • 如何在不使用变换或顶部/左侧的情况下转换列表中项目的位置

    有一天我偶然发现一个例子 https codepen io itslit pen gvKrMY它使用 Vue js 但我的问题更多是关于 Vue 用于实现状态之间转换的 CSS 和 HTML 卡片暂时获得等级 shuffleMedium m
  • 如何在有序列表中组合数字和字母?

    如何在 CSS 中用数字和字母递增有序列表 ol nested margin bottom 0 counter reset item ol nested li display block position relative ol neste
  • 如何隐藏div元素中太长的文本?

    如何隐藏 div 中的溢出 如果文本比 div 长 则文本将换行到新行 div style width 50px border 1px solid black test test test test div 也许是 CSS 属性text o
  • 如何在更大的 div 中垂直和水平居中一个 div?

    如何将一个 水平居中于另一个 中 我设法使用已接受答案中的样式水平居中 我怎样才能让它垂直居中 内部 div 的高度未知 https stackoverflow com questions 114543 how to center div
  • Angular - CSS - 自定义类型=文件输入,如何使用按钮而不是标签?

    我制作了一个类型为 file 的自定义输入字段 因为我不喜欢默认的输入字段 为了实现这一目标 我做了
  • 为 Angular2 中的组件加载多个样式表

    我正在构建一个 angular2 应用程序 当我尝试为同一组件加载多个样式表时 我面临多个问题 这是我正在做的代码 import Component from angular core Component selector my tag t
  • 可以设置标题样式吗? (并且使用CSS或js?)[重复]

    这个问题在这里已经有答案了 我想知道是否可以设计一个title a href title This is a title Hello a 样式问题有两个方面 文本格式 编码 我猜这是可能的 所以在问题中这样做 工具提示样式 你能把它弄大一点
  • 在 Nexus 7 2013 上更改方向时 CSS 媒体查询不起作用

    我目前正在我的笔记本电脑 台式电脑和 Nexus 7 2013 上测试 CSS 媒体查询 除了 Nexus 7 之外 它们在台式机和笔记本电脑上都运行良好 当我更改方向时 除非刷新页面 否则样式不会应用 例如 以纵向模式握住设备时 页面正常

随机推荐

  • 研究生文献笔记(obsidian模板分享!!):zotero+bookxnote pro+obsidian

    1s读懂 下载本文obsidian模板 打开链接 3 按照本文安装流程包含的内容进行安装 链接 3 其余部分可以不管 安装obsidian软件后之后直接打开本地仓库 不用新建 一 优点分析 1 1 zotero 文献从网页一键保存到软件 不
  • python安装opencv模块踩过的坑

    采用 pip 安装opencv python Pip install upgrade opencv python 然后 在python 中 import cv2 提示模块加载错误 the specified module could not
  • 区块链对接

    java本地生成地址 https github com tronprotocol java tron blob develop framework src main java org tron core services http Gene
  • eclipse安装可视化swing设计界面(windowbuilder)

    eclipse安装可视化swing设计界面 windowbuilder Step 1 2021 12 15 17 47 17 用户在 Help 菜单项目 上左键单击 Step 2 2021 12 15 17 47 50 在Find中输入wi
  • idea插件开发-发布

    九层之台起于累土千里之行始于足下 道德经 第六十四章 现在我们已经知道怎么开发一款自己的idea插件了 可以做很多有意思的东西来 但是只有自己享受怎么行呢 好东西得分享出来 今天我们就聊一聊怎么把自己的插件分享给大家 idea插件市场 id
  • 【TCP/IP】第五章 IP协议相关技术

    IP Internet Protocol 旨在让最终目标主机收到数据包 但是在这一过程中仅仅有IP时无法实现通信的 必须还有能够解析主机名称和MAC地址的功能 以及数据包在发送过程中异常情况处理的功能 此外 还会涉及IP必不可少的其他功能
  • DSP28335的AD采样读数一直是4095

    这几天做的一个DSP28335控制板测试时发现PWM没问题 但是测AD读数时A0和B0的读数都是4095 简单分析一下 对于DSP的供电 分为3 3V A 1 9V A 3 3V D 1 9V D 其中3 3V是给芯片外围供电 1 91V是
  • 远程java Robot的坑!!!

    1 发现一旦切换程序后 robot无法执行了 请用管理员身份运行 2 远程登陆最小化或关闭 模拟键盘操作失效 因为通过mstsc启动远程桌面连接时 被连接的Windows会启动一个会话 Session 此时你对远程桌面窗口里面的所有操作 鼠
  • springboot项目配置定时任务及注解时间配置

    SpringApplication引入注解 EnableScheduling 开启定时任务 在自定义类上加入注解 Component 可以不使用 在 Configuration 中存在 Configuration 在具体的方法上加入注解 S
  • React 生命周期&&diff算法

    目录 事件处理 收集表单数据 高阶函数 函数科里化 生命周期 认识生命周期 生命周期流程图 旧 生命周期流程图 新 getSnapshotBeforeUpdate应用场景 生命周期总结 DOM的diff算法 概念 key的值的作用 案例 事
  • 2019大厂Android高级面试题汇总

    前言 金三银四 很多同学心里大概都准备着年后找工作或者跳槽 最近有很多同学都在交流群里求大厂面试题 正好我电脑里面有这方面的整理 于是就发上来分享给大家 这些题目是网友去百度 小米 乐视 美团 58 猎豹 360 新浪 搜狐等一线互联网公司
  • 第一章

    1 写出Java领域的相关技术 答 Java主要有三类 Javase javame javaee JavaSE是Java技术的核心 提供基础的Java开发工具 Javaee主要用于网络程序和企业级应用的开发 2 简述Java程序中的注释的作
  • 软考高项之进度管理——攻坚记忆

    软考高项之进度管理 攻坚记忆 一 进度管理过程 二 规划进度管理和制定进度计划区别 三 重要的工具与技术 四 相关重要概念 一 进度管理过程 1 规划进度管理 需要写一个文档 进度管理计划 里面规定了如何做好进度管理 2 定义活动 识别和记
  • 接口请求之加密参数(用户名和密码),使用md5方法加密

    一 接口请求涉及到一些类似用户名和密码等敏感信息的东西 请求肯定要进行加密 当然首先你得问开发 他们对参数是否加密 用了什么方式进行加密 我这里就用md5加密方式对请求的密码进行加密 二 前端对字符串类型的密码进行加密 输出秘钥 传递时候是
  • MySQL必知必会 学习笔记 第二十六章 管理事务处理

    并非所有引擎都支持事务处理 MyISAM不支持 InnoDB支持 事务处理可用来维护数据库的完整性 它保证成批的MySQL操作要么完全执行 要么完全不执行 如果没有错误发生 整组语句写到数据库表 如果发生错误 将已经执行的部分语句进行回退
  • Linux下快速比较两个目录的不同

    每次更新版本就想要在Linux下比较目录a和目录b中文件列表的差别 然后对目录a比目录b中多出的文件 少掉的文件分别做处理 但是 在网上搜索了多次也都没找到能直接处理好的工具 所以想了很多不少方法 自我感觉都不错 而且网上似乎没有这方面的文
  • IFNULL、ISNULL、NULLIF(SYBASE)

    IFNULL expr1 expr2 如果expr1为NULL 返回值为expr2 假如expr1不为NULL 则IFNULL 的返回值为expr1 ISNULL expr1 expr2 如果expr1值为NULL 则返回值为expr2 如
  • ubuntu不能输入美元符号_听说 90% 的人都在 win10 下使用 ubuntu 子系统了!

    win10下安装 配置与使用ubuntu子系统完全指南 最近 遇到很多Python第三方库不支持Windows系统或则安装很繁琐要不就是要安装vc 环境 都比较麻烦 对于开发者而言 Mac真的是个不错的选择 Linux就更不用说了 一直听过
  • java爬取当当网所有分类的图书信息(ISBN,作者,出版社,价格,所属分类等)

    java爬取当当网所有分类的图书信息 ISBN 作者 出版社 价格 所属分类等 顺手写的 没有建立新项目 放我自己的项目的一个文件夹里了 有兴趣的朋友可以拉下来试试 https gitee com panlufei demo blob ma
  • RN获取屏幕高宽、自适应(rem)设置

    RN获取屏幕高宽 自适应 rem 设置 1 引入Dimensions 2 通过Dimensions get window width height 获取屏幕高宽 pxToDp自适应js文件 import Dimensions from re