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!哈哈,提前祝福各位园友国庆快乐.假期愉快.生活美满.天天开心!国庆我要回家一趟,把一些不用的东西带回家,走访一下亲朋好友,在家打几天酱油~~~ 言 ...
随机推荐
- React Snippets 常用记录
官网 PropTypes ptar→ PropTypes.array.isRequired ptor→ PropTypes.object.isRequired ptsr→ PropTypes.stri ...
- js for/in循环及其它
for in 循环不仅可以遍历对象的属性,还可以遍历数组. Js 中为数组提供了多种遍历方式 const ary = ['a', 'b', 'c']; // 最基本的方式, 只能遍历下标有序递增的数组 ...
- SQlAlchemy的增删改查
一.创建数据表 # ORM中的数据表是什么呢? # Object Relation Mapping # Object - Table 通过 Object 去操纵数据表 # 从而引出了我们的第一步创建数 ...
- c++两种字符串赋值方式 并介绍 C语言下遍历目录文件的方式
c++字符串声明:一种是声明字符数组并赋值,另一种是直接声明string类 #define _CRT_SECURE_NO_WARNINGS #include<iostream> #incl ...
- Apicloud 之按两次后退键退出应用
api.addEventListener({ name: 'keyback' }, function(ret, err) { if (flag == 1) { api.closeWidget({ si ...
- TDOA 基础之 双曲线
TDOA 的算法基础就是时间差,根据时间差换算出距离差,后面的数学理论知识就是双曲线交点问题. 双曲线方程是2次方程,解算曲线交点也就是两个2次方程求解. 首先看双曲线定义(百度百科): 双曲线(Hy ...
- win32通用控件
1.标准控件 可以在win32窗口程序中添加资源脚本来给程序添加标准控件: 具体操作为:新建资源脚本 ->在.rc文件中添加控件 ->给控件绑定事件: 常用的标准控件: ...
- spark操作hive方式(scala)
第一种方式: def operatorHive: Unit = { Class.forName("org.apache.hive.jdbc.HiveDriver") val url ...
- P3688 [ZJOI2017] 树状数组 【二维线段树】
题目描述:这里有一个写挂的树状数组: 有两种共\(m\)个操作: 输入\(l,r\),在\([l,r]\)中随机选择一个整数\(x\)执行\(\text{Add}(x)\) 输入\(l,r\),询问执 ...
- 10月清北学堂培训 Day 2
今天是杨溢鑫老师的讲授~ T1 物理题,不多说(其实是我物理不好qwq),注意考虑所有的情况,再就是公式要推对! #include<bits/stdc++.h> using namespa ...