zoukankan      html  css  js  c++  java
  • 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',
            null,
            height:null,
            //不加这句,就是按照屏幕高度自适应
            //加上这几,就是按照屏幕自适应
            //resizeMode:Image.resizeMode.contain,
            //祛除内部元素的白色背景
            backgroundColor:'rgba(0,0,0,0)',
          }
    });
  • 相关阅读:
    面向对象之prototype,__proto__
    Screen对象
    location对象
    history对象
    JS计时器
    window对象
    Dom操作html详细
    终端 git log 修改样式
    null 和 NULL 判断
    textfield设置左边距
  • 原文地址:https://www.cnblogs.com/pengsi/p/7942470.html
Copyright © 2011-2022 走看看