ReactNative学习----13图片组件Image及ImageBackground的使用

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/zhaihaohao1/article/details/88632660

官方文档：
https://reactnative.cn/docs/imagebackground/
https://reactnative.cn/docs/image/

代码复制即可使用
代码：
ImageBackgroundDemo.js

import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View, Alert, Button, TouchableHighlight, ImageBackground,Image} from 'react-native';

/**
 *
 *  ImageBackground 作为某个组建的背景
 *  Image 显示本地图片 显示网络图片
 *  
 *  https://reactnative.cn/docs/imagebackground/
 *  https://reactnative.cn/docs/image/
 *
 *
 */
export default class ImageBackgroundDemo extends Component {
    //渲染数据
    render() {
        return (
            <View>
                <ImageBackground source={require('../img/poster.jpg')} style={styles.image1}>
                    <Text style={{color: '#fff'}}>Inside</Text>
                </ImageBackground>
                {/*显示本地图片*/}
                <Image
                    style={styles.image1}
                    source={require('../img/poster.jpg')}
                />
                {/*显示网络图片*/}
                <Image
                    style={styles.image1}
                    source={{uri: 'https://facebook.github.io/react-native/docs/assets/favicon.png'}}
                />


            </View>

        );

    }

}
const styles = StyleSheet.create({

    image1: {
        width: 100,
        height: 100,
    },
    image2: {
        width: 100,
        height: 100,
    },
    image3: {
        width: 100,
        height: 100,
    },


});

源码下载：
源码：bkdemo1----ImageBackgroundDemo.js