我从react-native-image-filter
中得到了22张图片。这些图片是base64格式的。下面是渲染函数的代码。
render() {
const { images, imageIndex } = this.state;
return (
<View style={styles.container}>
{images?.length > 21 && <View style={{ flex: 1 }}>
<Image resizeMode={'contain'} source={{ uri: `data:image/png;base64,${images[imageIndex]?.base64}` }} style={{ width: 400, flex: 1 }} />
</View>}
<View style={{ height: 140, paddingVertical: 20 }}>
<ScrollView horizontal>
{images?.map((item, index) => {
return (
<View style={[{ marginHorizontal: 10 }, styles.center]}>
<Image
resizeMode={'cover'}
key={index.toString()}
onPress={() => this.setState({ imageIndex: index })}
source={{ uri: `data:image/png;base64,${item.base64}` }}
style={{ width: 80, height: 100, borderRadius: 8 }} />
</View>
)
})}
</ScrollView>
</View>
</View>
);
}
字符串
一切都很好,但图像加载太慢。我如何提高加载速度?
1条答案
按热度按时间zpqajqem1#
问题最明显的是Base64编码的图像。
速度变慢是因为React Native必须通过Native JS桥来回传递相当长的Base64字符串<->,加上原生平台必须解析Base64并将其转换为原生镜像视图的正确内存表示。因此,平台提供的许多优化都被错过了。
理想情况下,所有的图像操作都应该发生在原生平台上,并且实际的图像数据都不应该接触JS。
我建议尝试这两个库以获得更高性能的过滤器实现: