react-native加载图片

最新推荐文章于 2022-07-31 21:54:21 发布

ancles_

最新推荐文章于 2022-07-31 21:54:21 发布

阅读量441

点赞数 1

本文链接：https://blog.csdn.net/ancles_/article/details/53942502

版权

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @2016 12 30
 */


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

var imageAddress = 'http://cdn.duitang.com/uploads/item/201401/31/20140131042145_R8hZS.thumb.600_0.jpeg';
class react_webstorm extends Component {
    render() {
        return (
            //根View
            <View style={styles.container}>
                <Image style={styles.imageStyle}
                       source={{uri:imageAddress}}/>
            </View>
        );
    }
}
const styles = StyleSheet.create({
    container: {   //根View样式
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#F5FCFF'
    },
    imageStyle: {
        width:300,
        height:500
    }
});

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



加载本地图片


<Image style={styles.imageStyle}
       source={require('./image/n1.jpg')}/>