• 要使用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下

加載網(wǎng)絡(luò)的圖片

<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) 當(dāng)Image布局發(fā)生改變的题诵，會進(jìn)行調(diào)用該方法亥贸，調(diào)用的代碼為: {nativeEvent: {layout: {x, y, width, height}}}.
• onLoad (function):當(dāng)圖片加載成功之后鸿捧，回調(diào)該方法
• onLoadEnd (function):當(dāng)圖片加載失敗回調(diào)該方法，該不會管圖片加載成功還是失敗
• onLoadStart (fcuntion):當(dāng)圖片開始加載的時候調(diào)用該方法
• resizeMode 縮放比例,可選參數(shù)('cover', 'contain', 'stretch') 該當(dāng)圖片的尺寸超過布局的尺寸的時候，會根據(jù)設(shè)置Mode進(jìn)行縮放或者裁剪圖片
• source {uri:string} 進(jìn)行標(biāo)記圖片的引用震糖，該參數(shù)可以為一個網(wǎng)絡(luò)url地址或者一個本地的路徑

image樣式風(fēng)格

• FlexBox 支持彈性盒子風(fēng)格
• Transforms 支持屬性動畫
• resizeMode 設(shè)置縮放模式
• backgroundColor 背景顏色
• borderColor 邊框顏色
• borderWidth 邊框?qū)挾?/li>
• borderRadius 邊框圓角
• overflow 設(shè)置圖片尺寸超過容器可以設(shè)置顯示或者隱藏('visible','hidden')
• tintColor 顏色設(shè)置
• opacity 設(shè)置不透明度0.0(透明)-1.0(完全不透明)
• alignSelf:center 代表在當(dāng)前的布局中居中
• 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);