显示效果如下:

实现和页面代码如下:

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: ,
},
backgroundImage:{
flex:,
alignItems:'center',
justifyContent:'center',
width:null,
height:null,
//不加这句,就是按照屏幕高度自适应
//加上这几,就是按照屏幕自适应
//resizeMode:Image.resizeMode.contain,
//祛除内部元素的白色背景
backgroundColor:'rgba(0,0,0,0)',
}
});

React Native设置图片全屏背景显示的更多相关文章

  1. Android开发中的全屏背景显示方案

    引子 不管是Android还是iOS平台中,都可以看到一些应用在启动的时候会先出现一个启动画面(Splash Activity),如QQ.微信等.这个启动画面中往往会将ActionBar和Status ...

  2. Xcode 设置图片全屏显示

    - (void)viewDidLoad { [super viewDidLoad]; // Do any additional setup after loading the view, typica ...

  3. css3全屏背景显示

    background:url(zhongyi2.png) no-repeat center center fixed;/* -webkit-background-size:cover; -moz-ba ...

  4. css设置页面全屏背景

    .background { background: url(xxx.png); background-size: 100% 100%; height: 100%; position: fixed; w ...

  5. css3全屏背景图片切换特效

    效果体验:http://hovertree.com/texiao/css3/10/ 一般做图片切换效果,都会使用JS或者jQuery脚本,今天发现,其实只用CSS也可以实现.试试效果吧. 效果图: 代 ...

  6. CSS之生成全屏背景图片

    在CSS中背景图片的填充方法: background-position:x,y(背景图片x,y轴的定位) background-repeat:no-repeat(不平铺) background-rep ...

  7. Android开发 - 设置DialogFragment全屏显示

    默认的DialogFragment并不是全屏,但有些需求需要我们将对话框设置为全屏(内容全屏),Android并没有提供直接的API,通过其它不同的方法设置全屏在不同的机型上总有一些诡异的问题,经过测 ...

  8. 全屏背景:15个jQuery插件实现全屏背景图像或媒体

    动态网站通常利用背景图像或预加载屏幕,以保证所有资源都加载到页面上,在浏览器中充分呈现.现在很多网站都炫耀自己的图像作为背景图像全屏背景,追溯到旧的Flash网站却用自己的方式在HTML资源重布局. ...

  9. CSS之全屏背景图

    吐槽啦:Yeah  明天就是国庆了o(* ̄▽ ̄*)o!哈哈,提前祝福各位园友国庆快乐.假期愉快.生活美满.天天开心!国庆我要回家一趟,把一些不用的东西带回家,走访一下亲朋好友,在家打几天酱油~~~ 言 ...

随机推荐

  1. 优化你的HTTPS(上),你需要这么做

    HTTP/2 HTTP 2.0即超文本传输协议 2.0,是下一代HTTP协议.是由互联网工程任务组(IETF)的Hypertext Transfer Protocol Bis (httpbis)工作小 ...

  2. prometheus-alertmanager告警推送到钉钉

    1. Prometheus告警简介 告警能力在Prometheus的架构中被划分成两个独立的部分.如下所示,通过在Prometheus中定义AlertRule(告警规则),Prometheus会周期性 ...

  3. MySQL之两张表关系查找例子

    teacher表 mysql> select * from teacher; +-----+--------+-----+---------+----------+ | tid | tname ...

  4. 使用quickstart方式快速搭建maven工程

    通常idea 创建maven工程,初始化会比较慢,针对这种现象.我们可以使用一些巧妙的方式来帮助快速搭建 废话不多说直接上图! 图1 使用 archetype-quickstart  选择 图二 点击 ...

  5. P3588 [POI2015]PUS

    好题 思路:线段树优化建图+拓扑DP or 差分约束(都差不多): 提交:3次 错因:眼瞎没看题,Inf写的0x3f3f3f3f 题解: 类似差分约束的模型,\(a<b\rightarrow a ...

  6. 爬虫(十三):scrapy中pipeline的用法

    当Item 在Spider中被收集之后,就会被传递到Item Pipeline中进行处理 每个item pipeline组件是实现了简单的方法的python类,负责接收到item并通过它执行一些行为, ...

  7. javascript的this与prototype的区别

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. 10月清北学堂培训 Day 4

    今天是钟皓曦老师的讲授~ 今天的题比昨天的难好多,呜~ T1 我们需要找到一个能量传递最多的异构体就好了: 整体答案由花时间最多的异构体决定: 现在的问题就是这么确定一个异构体在花费时间最优的情况下所 ...

  9. zabbix (8) 自动发现

    当主机数量过多时,如果一台一台的添加,估计整个人都要崩溃,而通过自动发现或者自动注册可以大批量的添加主机,并且自动绑定模板,触发器,动作等操作 1.基本配置 (1)创建发现规则 (2)配置规则 效果如 ...

  10. (转)hadoop 常规错误问题(一)

    转至:http://www.freeoa.net/osuport/db/my-hbase-usage-problem-sets_2979.html 本文是我在使用Hbase的过程碰到的一些问题和相应的 ...