react native 图片样式导致的坑
最近项目中遇到一个问题,代码如下,点击进入另一个页面时需要显示的图片会黑屏,另外退回到该页面的时候下面代码中的第一个图片会全黑几秒才渲染,从另一个路径进入该页面时并没有此问题,就找了半天是不是数据的问题,结果并不是,对比两边的代码,发现多了一个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 图片样式导致的坑的更多相关文章
- [RN] React Native 图片保存到相册(支持 Android 和 ios)
React Native 图片保存到相册(支持 Android 和 ios) 原理: IOS用 RN自带的 CameraRoll, Android 使用 不成功,需要 react-native-fs ...
- [RN] React Native 图片懒加载库 animated-lazy-image
React Native 图片懒加载库 animated-lazy-image 官方Github地址: https://github.com/danijelgrabez/lazy-image 使用效果 ...
- React Native图片控件的使用
首先定义组件 import { AppRegistry, StyleSheet, Text, View, Image,} from 'react-native'; 然后将render返回中的模版增加I ...
- React Native Android配置部署踩坑日记
万事开头难 作为一只进入ECMAScript世界不久的菜鸟,已经被React Native的名气惊到了,开源一周数万星勾起了我浓烈的兴趣.新年新气象,来个HellWorld压压惊吧^_^(故意少打个' ...
- React Native之样式
样式 React Native 不实现 CSS,而是依赖于 JavaScript 来为你的应用程序设置样式.这是一个有争议的决定,你可以阅读那些幻灯片,了解背后的基本原理. 声明样式 在 React ...
- React Native 三:样式
一.声明和使用样式 1.React Native里面的样式和使用如以下所看到的.StyleSheet.create这个构造函数不是必须的. index.android.js文件 import Reac ...
- react-native —— 在Mac上配置React Native Android开发环境排坑总结
配置React Native Android开发环境总结 1.卸载Android Studio,在终端(terminal)执行以下命令: rm -Rf /Applications/Android\ S ...
- React Native 组件样式测试
View组件默认样式(注意默认flexDirection:'column') {flexGrow:0,flexShrink:0,flexBasis:'auto',flexDirection:'colu ...
- React Native图片缓存解决方案
1. react-native-fetch-blob 将图片存在本地的一个东西 2. react-native-img-cache 自动缓存的一个东西 上面装好后 就可以使用啦 import {Cac ...
随机推荐
- 在Wcf中应用ProtoBuf替代默认的序列化器
Google的ProtoBuf序列化器性能的牛逼已经有目共睹了,可以把它应用到Socket通讯,队列,Wcf中,身为dotnet程序员一边期待着不久后Grpc对dotnet core的支持更期待着Wc ...
- 使用 jQuery Ajax 在页面滚动时从服务器加载数据
简介 文本将演示怎么在滚动滚动条时从服务器端下载数据.用AJAX技术从服务器端加载数据有助于改善任何web应用的性能表现,因为在打开页面时,只有一屏的数据从服务器端加载了,需要更多的数据时,可以随着用 ...
- asp.net获取数据库的连接字符串
1.添加引用 using System.Configuration; 2.代码 string strConnectionString=ConfigurationManager.AppSettings[ ...
- Critical: Update Your Windows Secure Channel (cve-2014-6321,MS14-066)
前言:风雨欲来山满楼,下半年开始各种凶猛的漏洞层出不穷,天下已经不太平,互联网已经进入一个新的台阶 0x01 cve-2014-6321 11月的补丁月,微软请windows的用户吃了顿大餐,发布了1 ...
- 使用 ExecuteMultiple 提高批量数据加载的性能
您可以使用 ExecuteMultipleRequest 消息在 Microsoft Dynamics CRM Online 2016 Update 和 Microsoft Dynamics CRM ...
- Lucene的分析资料【转】
Lucene 源码剖析 1 目录 2 Lucene是什么 2.1.1 强大特性 2.1.2 API组成- 2.1.3 Hello World! 2.1.4 Lucene roadmap 3 索引文件结 ...
- xcode8 storyboard 控件显示错位
升级xcode8 后选择device 为6s 出现上面的情况,控件显示异常.使用Update Frame 显示正常.不能选择Update Constraints 如果误选 commend + Z ...
- 人工智能AI-机器视觉CV-数据挖掘DM-机器学习ML-神经网络-[资料集合贴]
说明:这个贴用于收集笔者能力范围内收集收藏并认为有用的资料,方便各方参考,免去到处找寻之苦,提升信息的交叉引用价值.仅供参考,不作为必然的推荐倾向.如涉及版权等问题请相关人员联系笔者,谢谢. |博客| ...
- freeswitch嵌入python脚本
操作系统:debian8.5_x64 freeswitch 版本 : 1.6.8 python版本:2.7.9 开启python模块 安装python lib库 apt-get install pyt ...
- yum安装php,php-fpm
1.检查当前安装的PHP包 yum list installed | grep php 如果有安装的PHP包,先删除他们 yum remove php.x86_64 php-cli.x86_64 ph ...