React Native学习笔记-Image

• 要使用Image这个控件我们需要在最上面引入这个model

import React, {
    AppRegistry,
    Component,
    StyleSheet,
    Text,
    View,
    Image//引入
} from 'react-native';

加载本地图片

      '测试本地图片'
      
 

加载工程中drawable中的图片

这里的图片一定要放在drawable下

加载网络的图片

texview加图片的背景

           下面是背景图

image属性的方法

• onLayout (function) 当Image布局发生改变的，会进行调用该方法，调用的代码为: {nativeEvent: {layout: {x, y, width, height}}}.
• onLoad (function):当图片加载成功之后，回调该方法
• onLoadEnd (function):当图片加载失败回调该方法，该不会管图片加载成功还是失败
• onLoadStart (fcuntion):当图片开始加载的时候调用该方法
• resizeMode 缩放比例,可选参数('cover', 'contain', 'stretch') 该当图片的尺寸超过布局的尺寸的时候，会根据设置Mode进行缩放或者裁剪图片
• source {uri:string} 进行标记图片的引用，该参数可以为一个网络url地址或者一个本地的路径

image样式风格

• FlexBox 支持弹性盒子风格
• Transforms 支持属性动画
• resizeMode 设置缩放模式
• backgroundColor 背景颜色
• borderColor 边框颜色
• borderWidth 边框宽度
• borderRadius 边框圆角
• overflow 设置图片尺寸超过容器可以设置显示或者隐藏('visible','hidden')
• tintColor 颜色设置
• opacity 设置不透明度0.0(透明)-1.0(完全不透明)
• alignSelf:center 代表在当前的布局中居中
• flexDirection:row 这个属性代表是以横向布局

下面是一个例子

import React, {
    AppRegistry,
    Component,
    StyleSheet,
    Text,
    View,
    Image
} from 'react-native';

class AwesomeProject extends Component {
    render() {
        return (
            
                
                    
                        
                        美食
                    
                    
                        
                        美食
                    
                    
                        
                        美食
                    
                    
                        
                        美食
                    
                    
                        
                        美食
                    
                
                
                    
                        
                        美食
                    
                    
                        
                        美食
                    
                    
                        
                        美食
                    
                    
                        
                        美食
                    
                    
                        
                        美食
                    
                
            
        );
    }
}

const styles = StyleSheet.create({
    container: {
        marginLeft: 5,
        marginTop: 10,
        marginRight: 5,
    },
    texstyle: {
        textAlign: 'center',
        color: '#555555',
        marginTop: 5,
        fontSize: 11,
    },
    imagestyle: {
        width: 45,
        height: 45,
        alignSelf: 'center',
    }
});

AppRegistry.registerComponent('AwesomeProject', () => AwesomeProject);