最近项目中遇到一个问题,代码如下,点击进入另一个页面时需要显示的图片会黑屏,另外退回到该页面的时候下面代码中的第一个图片会全黑几秒才渲染,从另一个路径进入该页面时并没有此问题,就找了半天是不是数据的问题,结果并不是,对比两边的代码,发现多了一个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. zip函数-Python 3

    zip函数接受任意多个(包括0个和1个)序列作为参数,返回一个tuple列表. zip函数在获取数据后,生成字典(dict)时比较好用. for examples: # Code based on P ...

  2. 数据库表结构设计方法及原则(li)

    数据库设计的三大范式:为了建立冗余较小.结构合理的数据库,设计数据库时必须遵循一定的规则.在关系型数据库中这种规则就称为范式.范式是符合某一种设计要求的总结.要想设计一个结构合理的关系型数据库,必须满 ...

  3. 浅谈Hybrid技术的设计与实现第二弹

    前言 浅谈Hybrid技术的设计与实现 浅谈Hybrid技术的设计与实现第二弹 浅谈Hybrid技术的设计与实现第三弹——落地篇 接上文:浅谈Hybrid技术的设计与实现(阅读本文前,建议阅读这个先) ...

  4. Vagrant基础简要记录

    Vagrant是一种开源软件,它为跨众多操作系统构建可重复的开发环境提供了一种方法.Vagrant使用提供者(provider)来启动隔离的虚拟环境.默认的提供者是Virtualbox Vagrant ...

  5. 最快让你上手ReactiveCocoa之基础篇

    前言 很多blog都说ReactiveCocoa好用,然后各种秀自己如何灵活运用ReactiveCocoa,但是感觉真正缺少的是一篇如何学习ReactiveCocoa的文章,这里介绍一下. 1.Rea ...

  6. 【代码笔记】iOS-获得现在的日期

    一,代码. - (void)viewDidLoad { [super viewDidLoad]; // Do any additional setup after loading the view, ...

  7. JAVA NIO Scatter/Gather(矢量IO)

    矢量IO=Scatter/Gather:   在多个缓冲区上实现一个简单的IO操作.减少或避免了缓冲区拷贝和系统调用(IO)   write:Gather 数据从几个缓冲区顺序抽取并沿着通道发送,就好 ...

  8. 0036 Java学习笔记-多线程-创建线程的三种方式

    创建线程 创建线程的三种方式: 继承java.lang.Thread 实现java.lang.Runnable接口 实现java.util.concurrent.Callable接口 所有的线程对象都 ...

  9. linux分区机制(MBR GPT)简介

  10. 【原】移动web页面给用户发送邮件的方法 (邮件含文本、图片、链接)

    微信商户通有这么一个需求,用户打开H5页面后,引导用户到电脑下载设计资源包,由于各种内部原因,被告知无后台资源支持,自己折腾了一段时间找了下面2个办法,简单做下笔记. 使用mailto功能,让用户自己 ...