React Native设置图片全屏背景显示
显示效果如下:
实现和页面代码如下:
1> 使用的react-navigation隐藏导航栏:
AddTopic: {screen: AddTopicScreen,navigationOptions: { title: ' ', // 这里不给值 header: false, // 不显示导航栏 gesturesEnabled: false }} },
2>页面代码如下:
/** * Created by 思思 on 17/12/1. */ import React, { Component } from 'react'; import { AppRegistry, StyleSheet, Text, View, Image, StatusBar } from 'react-native'; import Color from './../../Config/Color'; export default class extends Component { render() { return ( <View style={styles.container}> <View> <StatusBar barStyle="light-content" /> </View> <Image source={require('./../../Images/images/bg.png')} style={styles.backgroundImage} /> </View> ); } } const styles = StyleSheet.create({ container: { flex: 1, }, backgroundImage:{ flex:1, alignItems:'center', justifyContent:'center', width:null, height:null, //不加这句,就是按照屏幕高度自适应 //加上这几,就是按照屏幕自适应 //resizeMode:Image.resizeMode.contain, //祛除内部元素的白色背景 backgroundColor:'rgba(0,0,0,0)', } });