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: ,
},
backgroundImage:{
flex:,
alignItems:'center',
justifyContent:'center',
width:null,
height:null,
//不加这句,就是按照屏幕高度自适应
//加上这几,就是按照屏幕自适应
//resizeMode:Image.resizeMode.contain,
//祛除内部元素的白色背景
backgroundColor:'rgba(0,0,0,0)',
}
});
React Native设置图片全屏背景显示的更多相关文章
- Android开发中的全屏背景显示方案
引子 不管是Android还是iOS平台中,都可以看到一些应用在启动的时候会先出现一个启动画面(Splash Activity),如QQ.微信等.这个启动画面中往往会将ActionBar和Status ...
- Xcode 设置图片全屏显示
- (void)viewDidLoad { [super viewDidLoad]; // Do any additional setup after loading the view, typica ...
- css3全屏背景显示
background:url(zhongyi2.png) no-repeat center center fixed;/* -webkit-background-size:cover; -moz-ba ...
- css设置页面全屏背景
.background { background: url(xxx.png); background-size: 100% 100%; height: 100%; position: fixed; w ...
- css3全屏背景图片切换特效
效果体验:http://hovertree.com/texiao/css3/10/ 一般做图片切换效果,都会使用JS或者jQuery脚本,今天发现,其实只用CSS也可以实现.试试效果吧. 效果图: 代 ...
- CSS之生成全屏背景图片
在CSS中背景图片的填充方法: background-position:x,y(背景图片x,y轴的定位) background-repeat:no-repeat(不平铺) background-rep ...
- Android开发 - 设置DialogFragment全屏显示
默认的DialogFragment并不是全屏,但有些需求需要我们将对话框设置为全屏(内容全屏),Android并没有提供直接的API,通过其它不同的方法设置全屏在不同的机型上总有一些诡异的问题,经过测 ...
- 全屏背景:15个jQuery插件实现全屏背景图像或媒体
动态网站通常利用背景图像或预加载屏幕,以保证所有资源都加载到页面上,在浏览器中充分呈现.现在很多网站都炫耀自己的图像作为背景图像全屏背景,追溯到旧的Flash网站却用自己的方式在HTML资源重布局. ...
- CSS之全屏背景图
吐槽啦:Yeah 明天就是国庆了o(* ̄▽ ̄*)o!哈哈,提前祝福各位园友国庆快乐.假期愉快.生活美满.天天开心!国庆我要回家一趟,把一些不用的东西带回家,走访一下亲朋好友,在家打几天酱油~~~ 言 ...
随机推荐
- python基础--数据类型、运算符、流程控制
原文地址:https://www.liaoxuefeng.com/wiki/0014316089557264a6b348958f449949df42a6d3a2e542c000/00143165862 ...
- pyharm无法安装包的问题
1.换成下面这个网址 https://github.com/pypa/pip/issues/5236 2.下载最新的pip 3. 然后换回 https://pypi.org/simple/
- jmeter md5加密请求参数
实际的接口测试过程中,再发生http之前有可能需要对某些参数(或某几个参数的组合)进行md5加密 在jmeter中可通过两种方式来实现md5加密 beanshell实现md5加密 在org.apach ...
- TDOA 之TDOA算法python实现
这里指的TDOA算法,实际是解两个双曲线方程,由于两个二次方程设计东西较多,如果强解,计算量很大,从网上参考了如下链接: 算法推到:https://blog.csdn.net/lpsl1882/art ...
- 使用jQuery快速高效制作网页交互特效---表单校验
表单基本验证技术 为什么需要表单验证 减轻服务器的压力 保证输入的数据符合要求 常用的表单验证 1.日期格式 2.表单元素是否为空 3.用户名和密码 4.E-mail地址 5.身份证号码 表单选择器 ...
- sublime 分屏显示 不是插件
点击 view--layout --- 选择几屏即可(single / columns 2 ....) 快捷键 Alt + Shift + 1/2/3/4 分别对应1 ,2,3,4屏 如何把一个文 ...
- angular2事件触发
输入框输入过程触发Select()方法. <input type="text" name="code" [(ngModel)]="code&qu ...
- The Boot Process at a Glance x86/x64系统启动过程解析
哥又来干体力活了.人肉翻译一下: The Boot Process at a Glance This section explains the boot process in sufficient d ...
- <frame>、<iframe>、<embed>、<object> 和 <applet>
frame frame 必须在 frameset 里,而 frameset 又不能和 body 共存(就是一旦存在 frame,就不能存在 body 了,因此这个基本每人使用) 推荐阅读:https: ...
- codeforces#1249F. Maximum Weight Subset(树上dp)
题目链接: http://codeforces.com/contest/1249/problem/F 题意: 一棵树的每个节点有个权值,选择一个节点集,使得任意点对的距离大于$k$ 求最大节点集权值, ...