React Native Image 总结

一、通过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 组件化思想 布局适配 百分比