React Native 加载图片

效果图如下

import React, { Component } from 'react';

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

/*获得屏幕的宽和高需要导入的Dimensions包*/
var Dimensions = require('Dimensions');

export default class HelloWorldApp extends Component {
    render() {
        let pic = {
            uri: 'https://upload.wikimedia.org/wikipedia/commons/d/de/Bananavarieties.jpg'
        };
        return (
            <View style={styles.container}>
              <Image source={pic} style={styles.picStyle}/>
              <Text style={styles.helloTextStyle}>Hello</Text>
            </View>

        );
    }
}
/*获得屏幕宽度*/
let Screen_width = Dimensions.get('window').width;

const styles = StyleSheet.create({

    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#F5FCFF',
    },

    picStyle: {
      width:Screen_width,
        height:3*Screen_width/4.0,
    },

    helloTextStyle: {
        fontSize: 20,
        textAlign: 'center',
        margin: 10,
    },

});
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容