React Native Image 总结

最新推荐文章于 2024-11-21 12:44:08 发布

原创最新推荐文章于 2024-11-21 12:44:08 发布 · 469 阅读

0 ·

CC 4.0 BY-SA版权

本文介绍React Native中图片加载的最佳实践，包括如何使用source属性引用本地图片资源，利用react-native-img-cache库进行图片缓存以提升用户体验，并讨论了在图片未加载完成前预留位置的重要性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、通过source 属性 requer img路径

二、不支持 css3 Transforms 属性

三、要给定宽高在图片没加载时给图片留出位置更好的用户体验

四、可以react-native-img-cache 库做图片缓存

react-native-img-cache该库使用是需要依赖react-native-fetch库:https://github.com/wkh237/react-native-fetch-blob)-blob(点击进入该库。

class Item extends Component {
    render() {
        return (
            <View>
                <Image source={require('./8.jpg')} style={{alignSelf:'center',width:100,height:100,opacity:0.2}}>
                    <Text style={{fontSize:20,color:'red'}}>王猛</Text>
                </Image>

            </View>
        )
    }
}
class MyImage extends Component {
    render() {
        return (
            <View style={{marginTop:10}}>

                <View style={{flexDirection:'row'}}>
                    <View style={{width:'20%'}}>
                        <Item name="王猛"/>
                    </View>
                    <View style={{width:'20%'}}>
                        <Item name="王猛"/>
                    </View >
                    <View style={{width:'20%'}}>
                        <Item name="王猛"/>
                    </View >
                    <View style={{width:'20%'}}>
                        <Item name="王猛"/>
                    </View>
                    <View style={{width:'20%'}}>
                        <Item name="王猛"/>
                    </View>
                </View>

react 组件化思想布局适配百分比