Example

示例

下面的例子分别演示了如何显示从本地缓存、网络甚至是以'data:'的 base64 uri 形式提供的图片。

请注意对于网络和 base64 数据的图片需要手动指定尺寸！

import React, { Component } from 'react';
import {  View, Image,StyleSheet } from 'react-native';
export  class pageComponent extends Component {
    constructor(props) {
        super(props);
        this.imageSource={uri: 'https://XXXXXXX/a.png'};
        this.imageSourceTwo={uri: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADMAAAAzCAYAAAA6oTAqAAAAEXRFWHRTb2Z0d2FyZQBwbmdjcnVzaEB1SfMAAABQSURBVGje7dSxCQBACARB+2/ab8BEeQNhFi6WSYzYLYudDQYGBgYGBgYGBgYGBgYGBgZmcvDqYGBgmhivGQYGBgYGBgYGBgYGBgYGBgbmQw+P/eMrC5UTVAAAAABJRU5ErkJggg=='};
    }
    render() {
        return (
            <View>
                <Image
                    source={require('../img/demo.png')}
                />
                <Image
                    style={styles.image}
                    source={this.imageSource}
                />
                <Image
                    style={styles.imageTwo}
                    source={this.imageSourceTwo}
                />
            </View>
        );
    }
}
const styles = StyleSheet.create({
    image: {
        width: 50,
        height: 50
    },
    imageTwo: {
        width: 66,
        height: 58
    },
});