版权声明:本文为博主原创文章,未经博主允许不得转载。 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