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,
    },

});
複製程式碼