React Native解决安卓图片被挤压

Bug如下图所示:

iOS显示正常,而安卓出现图片被挤压上去.

最后的解决方法:

比如你的 图片 是 750 x 513 那么 你设置样式的时候 width 为 屏幕的宽 ,高度为 屏幕的 宽 / (750 /513)
这样就保留了原图的宽高比.

var styles = StyleSheet.create({
  // 这里是拿不到图片的个数的,需要使用内联样式即可
    // contentContainer: {
    //   width: Util.size.width,
    //   height: Util.size.height,
    // },
    backgroundImage: {
      width: Util.size.width,
      height: Util.size.width / (750 / 1334),  // 这么设置是为了:保留了原图的宽高比,否则安卓会拉伸
    },
});

不理解的是为什么其他的没有问题,就是在这个引导页的实现上出现问题呢?知道的大神级的告诉我哟!!!

时间: 2024-10-28 06:29:10

React Native解决安卓图片被挤压的相关文章

React Native运行安卓报错解决记录

1>Error:Configuration with name 'default' not found. 解决链接: http://blog.csdn.net/u011240877/article/details/51165799 2>Android Studio 报错总结: http://blog.csdn.net/zhouxin1233/article/details/51622102 3>required plugin "Android Support" is

React Native ScrollView 添加图片数组

"use strict" import React, { Component } from 'react';import { AppRegistry, // 注册组件,是应用的JS运行入口 StyleSheet, // 样式表, 类似于一个集合包含各个组件的属性 ScrollView, Dimensions, // 规格 Image, // 图片组件 View // 视图组件} from 'react-native'; // 当前设备屏幕的sizeconst { width, heig

React Native区分安卓/iOS平台

import { Platform, } from 'react-native'; alert(JSON.stringify(Platform)): android手机弹出:{"OS":"android","Version":25,"is Testing":false} 我是android7.1的 如果是苹果OS则为iOS 所以可以用以下判断方式 if(Platform.OS==='android'){ //如果是androi

React Native for Android 热部署图片自己定义方案

情景 热部署时,我们期望升级包中包括js代码与图片资源. bundle的热部署网上已经有两种方案了,一种是用反射,一种是利用RN自带函数.将bundle初始化时直接放到指定文件夹下,之后通过替换bundle文件实现代码热部署. 我们希望图片也能够实现热部署,以下是一个比較简单的解决方式. 详细需求:client解析从server下发的压缩包(zip),当中含js源文件index.android.bundle 和 图片包,解压后ReactNative指向 解压后index.android.bund

React Native 从入门到原理

抛砖引玉(帮你更好的去理解怎么产生的 能做什么) 砖一.动态配置 由于 AppStore 审核周期的限制,如何动态的更改 app 成为了永恒的话题.无论采用何种方式,我们的流程总是可以归结为以下三部曲:"从 Server 获取配置 –> 解析 –> 执行native代码". 很多时候,我们自觉或者不自觉的利用 JSON 文件实现动态配置的效果,它的核心流程是: 通过 HTTP 请求获取 JSON 格式的配置文件. 配置文件中标记了每一个元素的属性,比如位置,颜色,图片 UR

React Native 从入门到原理一

React Native 从入门到原理一 React Native 是最近非常火的一个话题,介绍如何利用 React Native 进行开发的文章和书籍多如牛毛,但面向入门水平并介绍它工作原理的文章却寥寥无几. 本文分为两个部分:上半部分用通俗的语言解释了相关的名词,重点介绍 React Native 出现的背景和试图解决的问题.适合新手对 React Native 形成初步了解. 下半部分则通过源码(0.27 版本)分析 React Native 的工作原理,适合深入学习理解 React Na

一个资深iOS开发者对于React Native的看法

一个资深iOS开发者对于React Native的看法 当我第一次尝试ReactNative的时候,我觉得这只是网页开发者涉足原生移动应用领域的歪门邪道. 我认为一个js开发者可以使用javascript来构建iPhone应用确实是一件很酷的事情,但是我很快放弃了自己去使用它的念头.毕竟我因为爱好而从事ios原生开发多年,并且目前为止已经很熟悉这一套开发专业工具. 我已经创造了一些我引以为傲的iOS应用——一些使用Object-C和Xcode构建的应用,通常人们都是这么做的.这两样工具是苹果公司

React Native专题-江清清

本React Native讲解专题:主要讲解了React Native开发,由基础环境搭建配置入门,基础,进阶相关讲解. 刚创建的React Native交流8群:533435865  欢迎各位大牛,React Native技术爱好者加入交流!同时博客右侧欢迎微信扫描关注订阅号,移动技术干货,精彩文章技术推送! 关于React Native各种疑难杂症,问题深坑总结方案请点击查看: Mac和Windows安装搭建React Native环境教程如下: Mac OS X版本:Mac OS X安装R

React Native实践之携程Moles框架

编者:本文来自携程框架研发部高级经理魏晓军在第二期[携程技术微分享]上的分享,以下为整理后的文字实录.视频回放可点击这里.关注携程技术中心微信公号ctriptech,可获知更多微分享课程信息. 因为支持用javascript开发原生应用,React Native一推出就受到不少公司热捧,各家都跃跃欲试.但有一个痛点是,在移动端,我们是否有必要开发多套程序:iOS.Android和H5?本次将通过对Moles框架的分享,介绍携程在React Native方面的实战干货,希望给大家一些灵感和启发.