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)',
      }
});

 

转载于:https://www.cnblogs.com/pengsi/p/7942470.html