时间戳

首页 > 解决方案 > 世博会图像很慢而且性能不好但是为什么

react-native - 世博会图像很慢而且性能不好但是为什么

问题描述

我有很多故事，大概20-30个。每个故事都有一个图像。如果我滚动图像非常慢并且它的滞后（挂出）。我用这个：https ://dev.to/dmitryame/implementing-fast-image-for-react-native-expo-apps-1dn3

但是如果我在 state 中添加一个新的 Story (Image) ，那么新的 Image 就不会显示。

你用什么来快速读取图像性能好？

小片段：

...
  const [storys, setStorys] = useState(route.params.storys || []);
...

        <ScrollView>
          <ScrollView
            horizontal={true}
            contentContainerStyle={{height: 100, marginLeft: 12}}
            scrollEventThrottle={50}
            showsHorizontalScrollIndicator={false}
            decelerationRate="normal"
          >
          {
            storys.length > 0 
            ?
              storys.map((el, i) => {
                return (
                  <TouchableOpacity key={`index-${i}`} style={{padding: 0, marginRight: 12, borderWidth: 2, justifyContent: 'center', alignItems: 'center', borderRadius: 100, borderColor: 'red', height: 88, width: 88}}>
                    
                    <Image source={{uri: `http://xx.xxxx.xx:3000/uploads/${el.source}`}} style={{height: 55, width: 55, borderRadius: 500}} />
                  </TouchableOpacity>
                )
              })
            :
            <Text>Es sind zurzeit keine Storys vorhanden.</Text>
          }
          </ScrollView>
        </ScrollView>

标签： react-nativeexpo

解决方案

先安装这些，

npm i react-native-expo-image-cache

然后

npm i expo-blur

然后像这样导入..

import { Image } from "react-native-expo-image-cache";

像这样使用它..

<Image 
  style={{height: 55, width: 55, borderRadius: 500}} 
  uri={`http://xx.xxxx.xx:3000/uploads/${el.source}`}
  preview={{ uri: `http://xx.xxxx.xx:3000/uploads/${el.source}` }}  // Here if you have a preview of the image then place it here...
/>

推荐阅读