• 要使用Image這個控件我們需要在最上面引入這個model

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

加載本地圖片

<View  style={{marginLeft:10,marginTop:10}}>
      <Text style={{fontSize:16}}>'測試本地圖片'</Text>
      <Image source={require('./img/my_icon.png')} />
 </View>

加載工程中drawable中的圖片

<Image source={{uri:'ic_launcher'}} style={{width: 40, height: 40}} />

這里的圖片一定要放在drawable下

加載網絡的圖片

<Image source={{uri:'http://mta.zttit.com:8080/images/ZTT_1404756641470_image.jpg'}}  style={{width:100,height:100}}/>

texview加圖片的背景

<Image source={require('./img/my_icon.png')} >
           <Text style={{color:'red'}}>下面是背景圖</Text>
</Image>

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 (
            <View style={styles.container}>
                <View style={{flexDirection:'row'}}>
                    <View style={{width:70}}>
                        <Image source={{uri:'http://p1.meituan.net/mmc/08615b8ae15d03c44cc5eb9bda381cb212714.png'}}
                               style={styles.imagestyle}/>
                        <Text style={styles.texstyle}>美食</Text>
                    </View>
                    <View style={{width:70}}>
                        <Image source={{uri:'http://p1.meituan.net/mmc/08615b8ae15d03c44cc5eb9bda381cb212714.png'}}
                               style={styles.imagestyle}/>
                        <Text style={styles.texstyle}>美食</Text>
                    </View>
                    <View style={{width:70}}>
                        <Image source={{uri:'http://p1.meituan.net/mmc/08615b8ae15d03c44cc5eb9bda381cb212714.png'}}
                               style={styles.imagestyle}/>
                        <Text style={styles.texstyle}>美食</Text>
                    </View>
                    <View style={{width:70}}>
                        <Image source={{uri:'http://p1.meituan.net/mmc/08615b8ae15d03c44cc5eb9bda381cb212714.png'}}
                               style={styles.imagestyle}/>
                        <Text style={styles.texstyle}>美食</Text>
                    </View>
                    <View style={{width:70}}>
                        <Image source={{uri:'http://p1.meituan.net/mmc/08615b8ae15d03c44cc5eb9bda381cb212714.png'}}
                               style={styles.imagestyle}/>
                        <Text style={styles.texstyle}>美食</Text>
                    </View>
                </View>
                <View style={{flexDirection:'row',marginTop:10}}>
                    <View style={{width:70}}>
                        <Image source={{uri:'http://p1.meituan.net/mmc/08615b8ae15d03c44cc5eb9bda381cb212714.png'}}
                               style={styles.imagestyle}/>
                        <Text style={styles.texstyle}>美食</Text>
                    </View>
                    <View style={{width:70}}>
                        <Image source={{uri:'http://p1.meituan.net/mmc/08615b8ae15d03c44cc5eb9bda381cb212714.png'}}
                               style={styles.imagestyle}/>
                        <Text style={styles.texstyle}>美食</Text>
                    </View>
                    <View style={{width:70}}>
                        <Image source={{uri:'http://p1.meituan.net/mmc/08615b8ae15d03c44cc5eb9bda381cb212714.png'}}
                               style={styles.imagestyle}/>
                        <Text style={styles.texstyle}>美食</Text>
                    </View>
                    <View style={{width:70}}>
                        <Image source={{uri:'http://p1.meituan.net/mmc/08615b8ae15d03c44cc5eb9bda381cb212714.png'}}
                               style={styles.imagestyle}/>
                        <Text style={styles.texstyle}>美食</Text>
                    </View>
                    <View style={{width:70}}>
                        <Image source={{uri:'http://p1.meituan.net/mmc/08615b8ae15d03c44cc5eb9bda381cb212714.png'}}
                               style={styles.imagestyle}/>
                        <Text style={styles.texstyle}>美食</Text>
                    </View>
                </View>
            </View>
        );
    }
}

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);