Question

如果我添加 4 张图片，为什么我的应用程序挂起而且速度很慢？

奇怪的是，如果我添加像我这样的其他图像，那么它会很快。但其他图像很慢。我不明白...我想使用 react-native-fast-image 但它不支持 expo。

有人有想法吗？

前端：

            <FlatList
            data={storys}
            renderItem={({ item }) => (
            <TouchableOpacity key={`index-${item.source}`} style={{padding: 0, marginRight: 12, borderWidth: 1, justifyContent: 'center', alignItems: 'center', borderRadius: 100, borderColor: 'red', height: 55, width: 55}}>
              <Image resizeMode="contain" source={{uri: `http://xxxx.xxx:3000/build/${item.source}`}} style={{height: 55, width: 55, borderRadius: 500}} />
            </TouchableOpacity>
            )}
            keyExtractor={item => item.source.toString()}
           // ListHeaderComponent={() => this.renderHeader()}
            nestedScrollEnabled
            horizontal
            showsHorizontalScrollIndicator={false}
            // Performance settings
            removeClippedSubviews={true} // Unmount components when outside of window 
            initialNumToRender={2} // Reduce initial render amount
            maxToRenderPerBatch={1} // Reduce number in each render batch
            updateCellsBatchingPeriod={100} // Increase time between renders
            windowSize={7} // Reduce the window size

我将图像大小从 1MB 减小到 100KB，但没有帮助： https://www.npmjs.com/package/compress-images

  compress_images(INPUT_path_to_your_images, OUTPUT_path, { compress_force: false, statistic: true, autoupdate: true }, false,
    { jpg: { engine: "mozjpeg", command: ["-quality", "60"] } },
    { png: { engine: "pngquant", command: ["--quality=20-50", "-o"] } },
    { svg: { engine: "svgo", command: "--multipass" } },
    { gif: { engine: "gifsicle", command: ["--colors", "64", "--use-col=web"] } },
    function (error, completed, statistic) {
      console.log("-------------");
      console.log(error);
      console.log(completed);
      console.log(statistic);
      console.log("-------------");
    }
    );

OUTPUT:

{
  input: 'uploads/photo_1621439485158_8c96d46f-8a88-4e36-8f31-182e9e2e046e.jpg',
  path_out_new: 'build/photo_1621439485158_8c96d46f-8a88-4e36-8f31-182e9e2e046e.jpg',
  algorithm: 'mozjpeg',
  size_in: 1593671,
  size_output: 98894,
  percent: 93.79,
  err: null
}

世博会图像很慢

0 个答案: