[转] react-native 之布局篇

PS: 苹果使用的宽度单位是为了设计开发者在应用上使用接近的数值。比如宽度范围都在320-414之间。但是宽度对应到像素是有一个转换比例的,对于背景图尤其要准备足够像素的图片。这个足够像素可以通过公式PixelRatio计算得到,iphone6P最大是1080*1920

宽度单位和像素密度

react的宽度不支持百分比,设置宽度时不需要带单位 {width: 10}, 那么10代表的具体宽度是多少呢?

不知道是官网文档不全还是我眼瞎,反正是没找到,那做一个实验自己找吧:

    var Dimensions = require(‘Dimensions‘);
    <Text style={styles.welcome}>
          window.width={Dimensions.get(‘window‘).width + ‘\n‘}
          window.height={Dimensions.get(‘window‘).height + ‘\n‘}
          pxielRatio={PixelRatio.get()}
    </Text> 

默认用的是ihone6的模拟器结果是:

    window.width=375
    window.height=667

我们知道iphone系列的尺寸如下图:

可以看到iphone 6的宽度为 375pt,对应了上边的375,实际上官文指出的单位为 dp 。 那如何获取实际的像素尺寸呢? 这对图片的高清化很重要,如果我的图片大小为100100 px. 设置宽度为100 100. 那在iphone上的尺寸就是模糊的。 这个时候需要的图像大小应该是 100 * pixelRatio的大小 。

react 提供了PixelRatio 的获取方式https://facebook.github.io/react-native/docs/pixelratio.html

 var image = getImage({
   width: 200 * PixelRatio.get(),
   height: 100 * PixelRatio.get()
 });
 <Image source={image} style={{width: 200, height: 100}} />
时间: 2024-10-02 11:02:15

[转] react-native 之布局篇的相关文章

React Native FlexBox布局

这段时间熟悉了一下ReactNative,里面的布局感觉很有意思,跟我以前接触的布局思想有很大不同,所以就自己测试了一些FlexBox的属性,一下是效果图: RN的布局主要依赖于FlexBox系统,它有如下几个主要属性: flex 视图的比重,这里注意了:In React Native flex does not work the same way that it does in CSS flexDirection 子视图在容器中排布的方向,这是用来确定主轴的 flexDirection con

React Native 弹性布局FlexBox

React Native采用一中全新的布局方式:FlexBox(弹性布局).可以很方便的实现各种复杂布局,是全新的针对web和移动开发布局的一种实现方式. 何为FlexBox? 完整名称为:the flexible box Module,旨在通过弹性的方式来对齐和分布容器中的组件.Flexbuju的主要思想是:让容器有能力让其子项目能够改变其宽度|高度|顺序,以最佳方式填充可用空间. 在布局中,首先得确定主轴方向(flexDirection),主轴组件的对齐方式(justifyContent),

React Native布局

一款好的APP离不了一个漂亮的布局,本文章将向大家分享React Native中的布局方式FlexBox. 在React Native中布局采用的是FleBox(弹性框)进行布局. FlexBox提供了在不同尺寸设备上都能保持一致的布局方式.FlexBox是CSS3弹性框布局规范,目前还处于最终征求意见稿 (Last Call Working Draft)阶段,并不是所有的浏览器都支持Flexbox.但大家在做React Native开发时大可不必担心FlexBox的兼容性问题,因为既然Reac

从web移动端布局到react native布局

在web移动端通常会有这样的需求,实现上中下三栏布局(上下导航栏位置固定,中间部分内容超出可滚动),如下图所示: 实现方法如下: HTML结构: <div class='container'> <div class='header'></div> <div class='content'></div> <div class='footer'></div> </div> 首先可以利用fixed或者absolute

React Native资料

React Native 环境搭建 React Native 配置和起步 Sublime Text 3 搭建 React.js 开发环境 集成 ReactNative集成到已有工程中-IOS React Native集成到现有项目(非cocoa pods) 语法 ES 6入门 ES6新特性概览 React入门教程 React中文网 React Native中文网 布局 Flex布局 Flex 布局教程:语法篇 Flex 布局教程:实例篇 混编 React Native构建本地视图组件 React

React Native开发之FlexBox代码+图解

来自Leo的原创博客,转载请著名出处 我的stackoverflow 前言 FlexBox布局是React Native的布局核心,鉴于自己对FlexBox还有很多概念不太清楚,这篇文章就当成是总结,并且分享出来给大家. FlexBox布局能够帮助你更好的帮助你控制控件的大小和位置,Flexbox非常适合Mobile端的适配,我想这也是FaceBook为什么选择FlexBox作为React Native布局的原因吧. 本文参考文章如下 A Complete Guide to Flexbox re

[]H5、React Native、Native应用对比分析

目录(?)[-] 一React Native的出现 二3款应用效果 三工程方案 四对比分析 开发方式 性能 体验 更新 维护 开发方式 性能 体验 更新 维护 五综合 开发方式 性能 体验 更新 维护 @王利华,vczero “存 在即合理”.凡是存在的,都是合乎规律的.任何新事物的产生总要的它的道理:任何新事物的发展总是有着取代旧事物的能力.React Native来的正是时候,一则是因为H5发展到一定程度的受限:二则是移动市场的迅速崛起强调团队快速响应和迭代:三则是用户的体验被放大,用户要求

React Native 搭建开发环境

欢迎使用React Native!这篇文档会帮助你搭建基本的React Native开发环境.如果你已经搭好了环境,那么可以尝试一下编写Hello World. 根据你所使用的操作系统.针对的目标平台不同,具体步骤有所不同.如果想同时开发iOS和Android也没问题,你只需要先选一个平台开始,另一个平台的环境搭建只是稍有不同. 如果阅读完本文档后还碰到很多环境搭建的问题,我们建议你还可以再看看由本站提供的环境搭建视频教程(macOS iOS.macOS Android.windows Andr

React Native超棒的LayoutAnimation(布局动画)

该文翻译自:https://medium.com/@Jpoliachik/react-native-s-layoutanimation-is-awesome-4a4d317afd3e#.6syi2v6yh 刚创建的React Native技术交流群(282693535),欢迎各位大牛,React Native技术爱好者加入交流!同时博客右侧欢迎微信扫描关注订阅号,移动技术干货,精彩文章技术推送! 如果你是用React Native进行开发,然而还没有尝试过使用LayoutAnimation的话,

React Native之ViewPagerAndroid仿淘宝首页顶部分类布局效果实现

转载请注明出处:http://blog.csdn.net/woshizisezise/article/details/51030410 大家好,趁着现在别人都去吃饭的时间,来给大家讲一讲React Native中Android部分的控件ViewPagerAndroid的讲解,这里特别提醒一下,我写的博客都是基于大家有一些React Native基础的前提下,因为关于React Native这一系列的博文我是最近开始更新,由于自身工作繁重(每天早上10点干到晚上10点,是不是很惨?),所以暂时还没