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

    语言:只要在原来模板的位置建立语言目录 多主题:要重新定义模板的根目录

  2. mysql substring函数截取值后赋给一个declare变量

    今天写的一个mysql存储过程涉及到对一个传入参数的字符串截取,然后需要判断截取字符串进行一系列操作,最开始用select  subtring() into 这样的方法将截取值赋于declare变量直 ...

  3. seL4之hello-2旅途(完成更新)

    seL4之hello-2旅途 2016/11/19 13:15:38 If you like my blog, please buy me a cup of coffee. 回顾上周 seL4运行环境 ...

  4. Ubuntu搭建NFS

    NFS全称是Network File System,网络文件系统.它可以通过网络实现文件共享.其结构图大概是这样的: 在机器E上开启NFS服务,机器ABCD都挂载NFS,这样可以实现机器ABCD共享文 ...

  5. yii2中如何使用modal弹窗之基本使用

    作者:白狼 出处:http://www.manks.top/yii2_modal_baseuse.html 本文版权归作者,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接, ...

  6. Event Handler

    在Event Handler中,有一种特殊的Event Handler,称之为Synchronizer或者Denormalizer,其作用就是为了同步“Query Database”.Query Da ...

  7. VNC connect:Connection refused(10061)

    在Windows机器上使用VNC Viewer访问Linux服务器,有时候会遇到"connect:Connection refused(10061)"这个错误,导致这个错误出现的原 ...

  8. MySQL函数

    MySQL数据库提供了很多函数包括: 数学函数: 字符串函数: 日期和时间函数: 条件判断函数: 系统信息函数: 加密函数: 格式化函数: 一.数学函数 数学函数主要用于处理数字,包括整型.浮点数等. ...

  9. Java线程并发:知识点

    Java线程并发:知识点   发布:一个对象是使它能够被当前范围之外的代码所引用: 常见形式:将对象的的引用存储到公共静态域:非私有方法中返回引用:发布内部类实例,包含引用.   逃逸:在对象尚未准备 ...

  10. 使用InstallAnywhere工具打包Java_Web程序

      一.准备工作 1.    下载InstallAnywhere,并安装: 2.    下载解压版jdk1.7(示例为jdk1.7.0_75): 3.    下载解压版tomcat7.0以上版本(示例 ...