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

  1. <TouchableHighlight underlayColor='#dddddd' onPress={this._stuInfo.bind(this,rowData.studentid,rowData.id,photo)}>
  2. <View style={styles.follList}>
  3. <View style={styles.studentItem}>
  4. <Image source={photo} style={styles.photo}/>
  5. <View style={styles.stuText}><Text style={styles.stuname}>{rowData.studentname}</Text>
  6. </View>
  7. </View>
  8. <TouchableOpacity onPress={this.delete.bind(this,rowData.id,rowID,rowData.studentid)}>
  9. <Image source={image} style={styles.followIcon}/>
  10. </TouchableOpacity>
  11. </View>
  12. </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. 记录一次bug解决过程:else未补全导致数据泄露和代码优化

    一.总结 快捷键ctrl + alt + 四个方向键 --> 倒置屏幕 未补全else逻辑,倒置查询数据泄露 空指针是最容易犯的错误,数据的空指针,可以普遍采用三目运算符来解决 SVN冲突解决关 ...

  2. Mac 热键大全

    屏幕捕捉快捷键动作............................保存到............-快捷键 全屏捕捉........................桌面(.PDF文件)..... ...

  3. HTML5 数据集属性dataset

    有时候在HTML元素上绑定一些额外信息,特别是JS选取操作这些元素时特别有帮助.通常我们会使用getAttribute()和setAttribute()来读和写非标题属性的值.但为此付出的代价是文档将 ...

  4. MongoDB基础命令笔记

    一.创建数据库 use foobar 二.创建集合 db.persons.insert({name:"zhaomin",age:23}) 三.查找 db.persons.find( ...

  5. Nuclear开始

    为什么Nuclear 这里列举Nuclear在竞品中的优势: 借助浏览器本身的机制,无任何代码约定和入侵 放心使用HTML+CSS+JS observejs替代EventLoop.requestAni ...

  6. [deviceone开发]-do_Webview加载JQueryMobile的示例

    一.简介 JQueryMobile是JQuery的移动版,不过它并没有像JQuery那么成功.我们只是使用JQueryMobile来展示do_Webview加载第三方js框架.适合所有开发者.二.效果 ...

  7. iOS NSDate等时间类的使用

    一.NSDate NSDate对象用来表示一个具体的时间点. NSDate是一个类簇,我们所使用的NSDate对象,都是NSDate的私有子类的实体. NSDate存储的是GMT时间,使用的时候会根据 ...

  8. When it comes to intrusion analysis and forensics

    以下内容的出现可以追溯到一个发生在互联网的安全事件: Z公司遭受某种攻击,服务器上被植入了Linux DDOS木马,部分系统命令入ls遭替换,攻击者已经获得该服务器root权限: 影响更恶劣的是,连接 ...

  9. 用NSCalendar和UICollectionView自定义日历,并实现签到显示

    前一段时间因为工作需要实现了一个可以签到的日历,来记录一下实现的思路 效果如图:   这里的基本需求是: 1,显示用户某个月的签到情况,已经签到的日子打个圈,没有签到且在某个时间范围内的可以签到,其他 ...

  10. 《简单的自定义DropDatePicker》-- UIPopoverController 和 代理 以及 Block 实现。

    最近做项目为了方便项目使用,自定义的空间 写的比较粗糙.欢迎大家批评指正.以上为在项目中的实际应用 // DropDownDatePicker.h // DropDownDatePickerDemo ...