最近项目中遇到一个问题,代码如下,点击进入另一个页面时需要显示的图片会黑屏,另外退回到该页面的时候下面代码中的第一个图片会全黑几秒才渲染,从另一个路径进入该页面时并没有此问题,就找了半天是不是数据的问题,结果并不是,对比两边的代码,发现多了一个TouchableOpacity的组件。将该组件去掉不存在该问题了。

            <TouchableHighlight underlayColor='#dddddd'  onPress={this._stuInfo.bind(this,rowData.studentid,rowData.id,photo)}>
<View style={styles.follList}>
<View style={styles.studentItem}>
<Image source={photo} style={styles.photo}/>
<View style={styles.stuText}><Text style={styles.stuname}>{rowData.studentname}</Text>
</View>
</View>
<TouchableOpacity onPress={this.delete.bind(this,rowData.id,rowID,rowData.studentid)}>
<Image source={image} style={styles.followIcon}/>
</TouchableOpacity>
</View>
</TouchableHighlight>

但是又不能去掉TouchableOpacity这个组件就尝试再排除,把里面的Image替换为Text,果然没有此类问题。这下就知道坑在Image组件上了,尝试改变样式。最终发现是样式followIcon中的resizeMode:'stretch'引起的,至于原因并不是很清楚,特此做个记录。

react native 图片样式导致的坑的更多相关文章

  1. [RN] React Native 图片保存到相册(支持 Android 和 ios)

    React Native 图片保存到相册(支持 Android 和 ios) 原理: IOS用 RN自带的 CameraRoll, Android 使用 不成功,需要 react-native-fs  ...

  2. [RN] React Native 图片懒加载库 animated-lazy-image

    React Native 图片懒加载库 animated-lazy-image 官方Github地址: https://github.com/danijelgrabez/lazy-image 使用效果 ...

  3. React Native图片控件的使用

    首先定义组件 import { AppRegistry, StyleSheet, Text, View, Image,} from 'react-native'; 然后将render返回中的模版增加I ...

  4. React Native Android配置部署踩坑日记

    万事开头难 作为一只进入ECMAScript世界不久的菜鸟,已经被React Native的名气惊到了,开源一周数万星勾起了我浓烈的兴趣.新年新气象,来个HellWorld压压惊吧^_^(故意少打个' ...

  5. React Native之样式

    样式 React Native 不实现 CSS,而是依赖于 JavaScript 来为你的应用程序设置样式.这是一个有争议的决定,你可以阅读那些幻灯片,了解背后的基本原理. 声明样式 在 React ...

  6. React Native 三:样式

    一.声明和使用样式 1.React Native里面的样式和使用如以下所看到的.StyleSheet.create这个构造函数不是必须的. index.android.js文件 import Reac ...

  7. react-native —— 在Mac上配置React Native Android开发环境排坑总结

    配置React Native Android开发环境总结 1.卸载Android Studio,在终端(terminal)执行以下命令: rm -Rf /Applications/Android\ S ...

  8. React Native 组件样式测试

    View组件默认样式(注意默认flexDirection:'column') {flexGrow:0,flexShrink:0,flexBasis:'auto',flexDirection:'colu ...

  9. React Native图片缓存解决方案

    1. react-native-fetch-blob 将图片存在本地的一个东西 2. react-native-img-cache 自动缓存的一个东西 上面装好后 就可以使用啦 import {Cac ...

随机推荐

  1. CentOS系统配置 iptables防火墙

    阿里云CentOS系统配置iptables防火墙   虽说阿里云推出了云盾服务,但是自己再加一层防火墙总归是更安全些,下面是我在阿里云vps上配置防火墙的过程,目前只配置INPUT.OUTPUT和FO ...

  2. SQL Server导入数据时“启用标示插入”详解

    在SQL Server中导入数据时,会有一个"启用标示插入"的选项,突然间懵逼了,这到底啥意思?我选与不选这个选项,结果好像没区别!不科学啊这,"存在即合理", ...

  3. CSS常用渐变

    边框渐变: border-image: -webkit-linear-gradient( red , blue) 30 30; border-image: -moz-linear-gradient( ...

  4. 【H5疑难杂症】脱离文档流时的渲染BUG

    BUG重现 最近机票团队在一个页面布局复杂的地方发现一个BUG,非常奇怪并且不好定位,这类问题一般最后都会到我这里,这个问题是,改变dom结构,页面却不渲染!!! 如图所示,我动态的改变了dom结构, ...

  5. Linux下安装Oracle11g服务器

    1.安装环境 Linux服务器:CentOS  64位 Oracle服务器:Oracle11gR2 64位 2.系统要求 Linux安装Oracle系统要求 系统要求 说明 内存 必须高于1G的物理内 ...

  6. MBProgressHUD 显示后,为何不能点击屏幕其他地方

    解决办法: hud.userInteractionEnabled= NO;  就是这么简单粗暴!这个问题 我一定要发到首页候选区! /********************************* ...

  7. Mac利用PD虚拟机安装Centos7

    一.PD虚拟机的安装1.Parallels Desktop ,简称PD,号称是Mac上最好用的虚拟机,具体的就在此不进行过多描述.下附Mac .app文件夹下载,下载后放入/Applications/ ...

  8. Jsp的九个内置对象

    一.什么是内置对象?在jsp开发中,会频繁使用到一些对象.例如HttSession,ServletContext,HttpServletRequest.如果我们每次要使用这些对象都去创建这些对象,就会 ...

  9. AEAI CRM_v1.5.2升级说明,开源客户关系管理系统

    1.升级说明 本次AEAI CRM升级内容主要是针对数通畅联推出AEAI ECP企业云联平台而升级的,其中对AEAI CRM的各模块进行扩展,同时增加了移动门户版功能及为AEAI ECP提供数据服务接 ...

  10. Oracle forall bulk collect批量数据更新

    对于数据量较大的插入操作可采用此种方法操作,注意: limit减少内存占用,如果数据量较大一次性全部加载到内存中,对PGA来说压力太大,可采用limit的方法一次加载一定数量的数据,建议值通常为100 ...