- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
设置!
我在类似聊天的界面中动态加载图像,其中的消息只是文本,或者是图像和文本的消息。目前,我让它从存储在 firebase 存储中的外部 url 加载图像,并将元数据 CacheControl 设置为允许图像缓存。
我正在通过标准 react native 库图像在相当标准的平面列表中显示图像。我正在做的一件奇怪的事情是根据平面列表数据中的状态有条件地添加一个组件。示例:
ImageOrViewMessages = (props) => {
if(item != null && item.image != ''){
return (
<View>
<Image source={{uri: item.image, cache: "force-cache"}} style={{display: 'flex', height: 300, flex: 1, padding: 5}} />
</View>
)
} else {
return(
<View style={{display: 'none'}}></View>
)
}
}
这是我的平面列表:
<FlatList
data={this.props.unsent_messages.length > 0 && this.props.chat != '' ? this.props.unsent_messages.concat(this.props.messages) : this.props.messages}
renderItem={({item}) => {
var align_text = "flex-end"
var background_color = colors.main_color_light;
var text_color = "white"
var stamp = "none"
if(item.username.toLowerCase() != this.props.displayName.toLowerCase()){
//do something differ
align_text = "flex-start"
background_color = colors.main_color_dark;
text_color = "white"
stamp = "flex"
}
ImageOrViewMessages = (props) => {
if(item != null && item.image != ''){
return (
<View>
<Image source={{uri: item.image, cache: "force-cache"}} style={{display: 'flex', height: 300, flex: 1, padding: 5}} />
</View>
)
} else {
return(
<View style={{display: 'none'}}></View>
)
}
}
return(
<View style={{padding: 5, minHeight: 70, alignItems: align_text, justifyContent: "center"}}>
<View style={{opacity: item.id.toString().includes("Unset") ? .3 : 1, backgroundColor: background_color, padding: 5, borderWidth: 0, borderColor: colors.border_color,borderRadius: 8 , width: (Dimensions.get('window').width / 2) - 10, alignSelf: align_text}}>
<Text style={{fontFamily: "MarkerFelt-Thin", color: text_color, fontSize: 16, textAlign: "left", flex: 1}}>{item.message}</Text>
{/* <Text style={{display: stamp, fontFamily: "MarkerFelt-Thin", color: colors.background_color, fontSize: 14, textAlign: "right", flex: 1}}>{item.username}</Text> */}
<ImageOrViewMessages />
</View>
</View>
)}
}
keyExtractor={item => item.image != '' ? item.image : item.id.toString()}
style={{display: 'flex', flex: 1, borderTopLeftRadius: 25, borderTopRightRadius: 25}}
ref={ref => this.flatList = ref}
inverted={true}
/>
问题!
图像渲染得非常好,但每次它们都必须从我的服务器下载,而不是存储在缓存中。我尝试过的事情是确保上传图像上的元数据设置正确。通过图像属性“Cache”强制缓存。我已确保列表中的每个项目都有一个唯一的 key 集,包括通过 key 提取器的图像。 我还可以在我的主页上缓存图像,没有任何问题(当它不再位于平面列表中时)
最佳答案
是的,每次都会从服务器重新渲染图像。您需要将图像缓存在默认应用程序或设备内存中。最好的方法是FastImage用于延迟加载。
将您的图像负载替换为以下图像:
<FastImage
style={styles.image}
source={{
uri: YOUR_IMAGE_URL,
priority: FastImage.priority.normal,
}}
resizeMode={FastImage.resizeMode.contain}
/>
不要忘记导入 FastImage。
import FastImage from 'react-native-fast-image'
关于javascript - React-Native Flatlist 会在状态发生变化时重新渲染图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51413650/
下面的代码旨在在首次打开工作簿时运行。 Sub Auto_Open() Dim LastRow As Integer LastRow = Sheet6.UsedRange.Rows.Count Act
当我尝试操作我的代码时,除了弹出调试错误外,它执行得很好。错误信息在这里。 我的完整代码在这里。 #include using namespace std; class String { publi
The invocation of the constructor on type 'WpfApplication1.MainWindow' that matches the specified bi
我正在使用 BaseAdapter: public class MyAdapter extends BaseAdapter{ private final LayoutInflater mInflate
我想做网页抓取。我写了代码 var connection = require('./mysqlConnection'); var c = new Crawler({ maxConnections
我的系统中发生 Java 堆空间错误。我尝试了很多来自 Stack Overflow 的解决方案,但没有任何效果。当我工作时 当按下 OK 然后 (我的项目没有错误) 我的 eclipse.ini 是
环境: i5 750 DDR3 4GWin7 专业版 x64 sp1 DXSDK 9.0c 2010 年 6 月 GeForce GT240(驱动程序 275.33)512MB MSVC 2008 s
这段代码是我写的。 import socket host = 'localhost' port = 3794 s = socket.socket(socket.AF_INET, socket.SOCK
我正在尝试引用 UTC 时间间隔获取本地日期时间,我正在执行下面的代码。 var dtString =DateTime.UtcNow.ToString(@"yyyy-MM-ddTHH\:mm\:ss
我有一个非常简单的 C# 问题,它从库中加载 Windows WPF 窗口。这是代码: public partial class App : Application { public App(
我目前正在使用带有导航组件的底部导航,它工作正常但是当我们点击导航项 fragment 正在加载然后闪烁正在发生,即使当前选择的项目也会发生闪烁。它在加载 fragment 时发生。我的应用程序屏幕背
我是新来的 kotlin , 当我开始 Null Safety 时,我对下面的情况感到困惑. There's some data inconsistency with regard to initia
我有一个框,其中包含同时发生的两个独立的 css 转换。 当转换发生时,图标下方的标题和段落文本移动位置 参见 JS Fiddle:http://jsfiddle.net/Lsnbpt8r/ 这是我的
在为黑莓 10 构建电话间隙应用程序时,我遇到了异常情况。 [BUILD] Populating application source [BUILD] Parsing config.xml [
这个问题在这里已经有了答案: How to properly stop the Thread in Java? (8 个回答) 3年前关闭。 我看过How to properly stop the T
我试图弄清楚发生 fatal error 时如何刷新页面。基本上我正在访问图像 api 并将图像复制到我的服务器。我还每次都创建照片的缩略图版本。我会每隔一段时间收到一条错误消息,指出我的脚本试图分配
我正在尝试使用断言函数检查元素是否在屏幕上。我在我的测试应用程序 (AndroidDriver) 中使用 Appium 和 Java。我期望的是,如果元素在屏幕上,则返回 1;如果不在屏幕上,则返回
我正在开发图像上传系统。我使用 CommonsMultipartResolver 设置 maxUploadSize。当我尝试上传超过最大尺寸的图像文件时,会发生 MaxUploadSizeExcced
我有以下代码和@ComponentScan(basePackages = "com.project.shopping"),包结构为 com.project.shopping.Controller co
我尝试运行此程序作为测试,但收到错误“发生了 JNI 错误,请检查您的安装并重试”,然后是“发生了 Java 异常”。关于如何解决这个问题有什么想法吗? package java; public cl
我是一名优秀的程序员,十分优秀!