react-native如何将UI设计稿上的原型的大小转换为开发大小，还能实现各种屏幕自适应

最新推荐文章于 2021-04-01 15:45:23 发布
最新推荐文章于 2021-04-01 15:45:23 发布
阅读量2.7k 收藏 1
点赞数
分类专栏： react-native 文章标签： react-native
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zdluoa/article/details/79764550
版权

原型设计稿：

    

输入框

    高度：150；

    宽带：900；

如何将原型上px单位转为react-native的dp单位？

    1、原型宽度/设备dp宽度 = px和dp的比例；

    2、原型宽度可以通过ps获取到：1080；

    3、设备的dp宽度 dp; 

        var {height, width} = Dimensions.get('window');

上图原型输入框宽高通过转换：

    宽：900 * dp/1080;

    高：150 * dp/1080;

   得到的值就给设备对应UI设置宽高了


zdluoa
关注
专栏目录
Vue及Element UI&vue-element-admin简记
生活在别处
11-21 6952
文章目录概念索引安装vue基本语法声明式渲染动态参数双向绑定数据绑定中进行数据处理使用JS表达式计算属性侦听器Class 与 Style 的数据绑定Class的数据绑定Style的数据绑定条件与循环条件渲染v-if指令v-show指令列表（数组）渲染数据更新检测事件监听器修饰符事件修饰符按键修饰符按键码系统修饰键指令的缩写组件化应用构建vue实例实例生命周期的钩子模板语法高级语法相关概念HTML ...
react网页适配不同分辨率_React native 分辨率适配(px,dp)
weixin_39622332的博客
12-19 629
React Native中使用的尺寸单位是dp(一种基于屏幕密度的抽象单位。在每英寸160点的显示器上，1dp = 1px),而设计师使用的是px, 这两种尺寸如何换算呢？官方提供了PixelRatio:import {PixelRatio} from 'react-native';const dp2px = dp=>PixelRatio.getPixelSizeForLayoutSize(...
ReactNative小小圈数据层设计稿（初稿）
LeoJame的博客
07-25 459
一、元数据1、返回值格式： { success：true/false date:{ 对象 } } 2、用户信息：user { id, //用户信息 name, //用户昵称 img, //用户头像 qianming, //个性签名 } 3、信息：message { id, //消息id create
React Native设计稿匹配
淮城一只猫
05-05 796
前言 在React Native项目中，所有的长度是没有单位。但设计师会给你基准设计稿，一般都是750px基准版本设计稿，如何在不同分辨率下的设备下进行很好的展示呢？ 移动操作系统为了适配不同屏幕尺寸和密度的设备，会将应用的用户界面调整为适应其显示的屏幕，也就是会对用户界面进行缩放和大小调整。针对说明，了解一些基本概念： 屏幕尺寸：按屏...
react native样式设计
LeoJame的博客
07-26 769
View Style 支持Flexbox、ShadowPropTypesIOS、Transforms属性。背面可见性backfaceVisibility enum('visible', 'hidden')背景颜色backgroundColor string边框颜色borderColor string borderTopColor string borderRightColor string bor
native字体尺寸自适应 react_《react-native》RN文字及布局的机型适配
weixin_39668965的博客
12-20 285
一、伸手党import { Dimensions, PixelRatio } from 'react-native'const defaultPixel = 2const wDp = Math.round(750 / defaultPixel)const hDp = Math.round(1334 / defaultPixel)const deviceWidthDp = Dimensions.ge...
unity 原型_使用Unity和React快速进行原型制作
weixin_26750481的博客
09-11 753
unity 原型Web applications are great way to quickly reach a lot of users without the hassle of native client installs and play store downloads. Web frameworks such as React allow page components to comm...
游戏UI设计与实现
游戏UI设计概述 ## 1.1 游戏UI的重要性 游戏UI（User Interface）是指游戏中供玩家与游戏进行交互的界面，包括菜单、按钮、图标、文字等元素。一个优秀的游戏UI设计可以提升游戏的易用性和可玩性，影响玩家对游戏...
移动应用开发中的UI设计与交互
移动应用开发是指为移动设备（如智能手机、平板电脑）开发应用程序的过程，它涉及到软件设计、编码、测试和发布等一系列流程。随着智能移动设备的普及和用户需求的不断增长，移动应用开发变得越来越重要。 ## 1.2 ...
react-native-size-matters：一个React-Native实用程序带，用于在不同大小的设备上缩放应用程序UI的大小
02-05
:triangular_ruler: React本机大小问题 一个React-Native实用程序带，用于在不同大小的设备上缩放应用程序UI的大小。 安装 npm install -- save react - native - size - matters //or: yarn add react - native - size - matters 动机 在使用react-native进行开发时，您需要手动调整您的应用程序，使其在各种不同的屏幕尺寸下看起来都不错。 那是一件乏味的工作。 react-native-size-matters提供了一些简单的工具，使您的缩放变得更加容易。 这个想法是在标准的约5英寸屏幕移动设备
react网页适配不同分辨率_React Native不同设备分辨率适配和设计稿尺寸单位px的适配...
weixin_39693101的博客
12-19 203
React Native中使用的尺寸单位是dp(一种基于屏幕密度的抽象单位。在每英寸160点的显示器上，1dp = 1px),而设计师使用的是px, 这两种尺寸如何换算呢？官方提供了PixelRatio进行pt到px的转换import {View style={{width:px2dp(100),height:px2dp(200),backgroundColor:"red"}}如果每个地方都这样写...
React Native 屏幕适配
qq_35089721的博客
11-05 608
"use strict" import {Dimensions, StatusBar, Platform, PixelRatio} from 'react-native' //UI设计图的宽度 const designWidth = 750 //UI设计图的高度 const designHeight = 1334 //手机屏幕的宽度 export const width = Dimensi...
react-native dpi转换
recover517的博客
09-13 1024
在RN文档中提供了默认了一部分用来获取屏幕dpi密度比 PixelRatio 再一次封装安卓原生canvas的过程中，由于pad dpi原因导致canvas总是无法充满组件。 尝试使用该api发现，返回的总是1，并没有卵用，在翻阅rn文档时发现了一个相当有用的常量。 此常量存在与StyleSheet中，十分隐蔽 StyleSheet.hairlineWidth 在使用中如下 ...
【React Native】Matching Game 配对游戏
嗨Sirius
01-01 565
基于React Native 的 跨三端（Android、iOS、Web）配对游戏 目录 第一章 需求分析和功能 第二章 框架架构和编码实现 第一章 需求分析和功能 我们知道现在有很多小游戏，但是这些小游戏要么只能Android运行，要么只能iOS运行，要么只能Web端运行。所以我想到了，要是能一次性编码解决跨端游戏开发就好了。 于是我就用React -Native来实现此次跨端小游戏的开发。 跨端小游戏的功能很简单，我主要实现游戏卡片的配对并计数。 刘海屏和全面屏底部的兼容 首先是头部的t
React Native－16.React Native 常用API及实践 PixelRatio
王学森的专栏
03-02 3432
React-Native 中的 PixlRatio简介 PixlRatio 用来获取像素相关的数据。常用的静态方法： get(): 获取像素密度。如： PixelRatio.get()===2 iPhone 4 ，4s iPhone 5 ，5c ，5s iPhone 6
php dp转px,React Native获取组件的宽高以及React Native屏幕dp与px转换计算
weixin_34139050的博客
04-01 262
1、ReactNative获取组件的宽高2、以及ReactNative屏幕dp与px转换计算；import React, {Component} from 'react';import {Text,View,findNodeHandle,UIManager,TouchableOpacity,Dimensions,PixelRatio,} from 'react-native';const {w...
react native 引入第三方组件常见问题分析
未金涛的博客
03-12 683
前言 react native 是Facebook开源的一款用于开发跨平台APP的框架。由于，官方给到的组件有限。在开发过程中我们会使用到一些第三方开源的组件。这个时候会遇到一个特别恶心的问题，就是第三方组件和reac native框架版本不匹配的问题。下面以我在Android开发下引入组件做为例子，阐述说明其中会遇到的问题。 引入组件 在引入一个第三方组件时。一般来说是有3个步骤的：第一步安装，第二步链接组件，第三步在AndroidManifest.xml里配置相应的权限。 安装 npm inst
新版React Native 混合开发(iOS篇)
大灰狼的小绵羊哥哥的博客
09-21 4927
在React Native的应用场景中，有时候一个APP只有部分页面是由React Native实现的，比如：我们常用的携程App，它的首页下的很多模块都是由React Native实现的，这种开发模式被称为混合开发。 混合开发的一些其他应用场景： 在原有项目中加入RN页面，在RN项目中加入原生页面 原生页面中嵌入RN模块 RN页面中嵌入原生模块 Native UI Components 以上这些都属于React Native混合开发的范畴，那么如何进行React Native混合开发
在react native中使用 react-native-echarts-pro组件的时候，图表会溢出容器，该如何将react-native-echarts-pro组件的大小设置成自适应容器的
最新发布
05-27
如果 react-native-echarts-pro 组件在 React Native 中的图表溢出容器，可以通过以下两种方法进行解决： 1.设置容器的大小 可以在容器组件中设置宽度和高度，然后将宽度和高度作为 props 传递给 react-native-echarts-pro 组件。例如： ``` import React from 'react'; import { View, Dimensions } from 'react-native'; import Echarts from 'react-native-echarts-pro'; const windowWidth = Dimensions.get('window').width; const windowHeight = Dimensions.get('window').height; export default function App() { return ( <View style={{ width: windowWidth, height: windowHeight }}> <Echarts option={option} width={windowWidth} // 设置宽度 height={windowHeight} // 设置高度 /> </View> ); } ``` 2.使用 onLayout 事件设置图表的大小 可以在 react-native-echarts-pro 组件中使用 onLayout 事件来获取容器组件的宽度和高度，然后将宽度和高度设置给图表。例如： ``` import React, { useState } from 'react'; import { View, Dimensions } from 'react-native'; import Echarts from 'react-native-echarts-pro'; export default function App() { const [chartWidth, setChartWidth] = useState(0); const [chartHeight, setChartHeight] = useState(0); const onLayout = event => { const { width, height } = event.nativeEvent.layout; setChartWidth(width); setChartHeight(height); }; return ( <View style={{ flex: 1 }} onLayout={onLayout}> <Echarts option={option} width={chartWidth} height={chartHeight} /> </View> ); } ``` 以上两种方法均可将 react-native-echarts-pro 组件的大小设置为自适应容器的大小。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值