[Flexbox] Use Flex to Scale Background Image
In this lesson we will use Flexbox to scale a background image to fit on the screen of our React Native application.
import React, { Component } from 'react';
import {AppRegistry, StyleSheet, Text, View, Image} from 'react-native';
export default class general extends Component {
render() {
return (
<Image source={require("./cat.jpg")} style={styles.container}>
<Text>A good looking cat</Text>
</Image>
);
}
}
const styles = StyleSheet.create({
container: {
flex: ,
width: null,
height: null,
alignItems: "center",
justifyContent: "center"
}
})
AppRegistry.registerComponent('general', () => general);
[Flexbox] Use Flex to Scale Background Image的更多相关文章
- CSS3 flexbox 布局 ---- flex项目属性介绍
现在介绍用在flex项目上的css 属性,html结构还是用ul, li 结构,不过内容改成1,2,3, 样式的话,直接把给 ul 设display:flex 变成flex 容器,默认主轴的方向为水平 ...
- CSS3 flexbox 布局 ---- flex 容器属性介绍
flexbox布局是CSS3中新增的属性,它可以很轻松地帮我们解决掉一些常见的布局问题,比如导航栏. 我们用普通的方法写导航栏,通常会在ul, li 结构写好后,让li 元素左浮动,然后再给ul 清浮 ...
- FCC---CSS Flexbox: Add Flex Superpowers to the Tweet Embed
To the right is the tweet embed that will be used as the practical example. Some of the elements wou ...
- 弹性盒式布局flexbox(dispaly:flex)
display:flex flex-direction: row(行)/column(列)/row-reverse/column-reverse反方向 //布局 justify-content: s ...
- Flex布局 Flexbox属性具体解释
原文:A Visual Guide to CSS3 Flexbox Properties Flex布局官方称为CSS Flexble Box布局模型是CSS3为了提高元素在容器中的对齐.方向.顺序,甚 ...
- CSS3 Flexbox轻松实现元素的水平居中和垂直居中
CSS3 Flexbox轻松实现元素的水平居中和垂直居中 网上有很多关于Flex的教程,对于Flex的叫法也不一,有的叫Flexbox,有的叫Flex,其实这两种叫法都没有错,只是Flexbox旧一点 ...
- 响应式布局:Flexbox应用总结
距离上篇文章<布局神器:Flexbox>的发表已有一周时间,转眼这周又到了周五(O(∩_∩)O~~): 习惯性在周五对自己的一周工作进行下总结,记录下这周值得被纪念的工作事件,无论是好的, ...
- CSS3 Flexbox轻巧实现元素的水平居中和垂直居中
CSS3 Flexbox轻松实现元素的水平居中和垂直居中 网上有很多关于Flex的教程,对于Flex的叫法也不一,有的叫Flexbox,有的叫Flex,其实这两种叫法都没有错,只是Flexbox旧一点 ...
- Flex布局-容器的属性
本文部分内容参考阮一峰大神博客,原文地址:http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html Flex布局即弹性布局,使用起来十分方便灵活 ...
随机推荐
- 82.QT实现委托构造
#include "mainwindow.h" #include <QApplication> //创建一个MainWindow类 class myclass { pr ...
- solr简介
Solr 是什么? Solr它是一种开放源码的.基于 Lucene Java 的搜索服务器,易于加入到 Web 应用程序中. Solr 提供了层面搜索(就是统计).命中醒目显示并且支持多种输出格式(包 ...
- Spark编程模型(博主推荐)
福利 => 每天都推送 欢迎大家,关注微信扫码并加入我的4个微信公众号: 大数据躺过的坑 Java从入门到架构师 人工智能躺过的坑 Java全栈大联盟 ...
- 「HAOI2018」字串覆盖
「HAOI2018」字串覆盖 题意: 给你两个字符串,长度都为\(N\),以及一个参数\(K\),有\(M\)个询问,每次给你一个\(B\)串的一个子串,问用这个字串去覆盖\(A\)串一段区间的最 ...
- 通过一个案例彻底读懂10046 trace--字节级深入破解
转载请注明出处:http://blog.csdn.net/guoyjoe/article/details/37840583 2014.7.23晚20:30 Oracle support组猫大师分享&l ...
- pdnsd 解析原理
apt install dnsmasq dnsmasq-fullvim /etc/dnsmasq.conf vim /etc/pdnsd.conf killall pdnsdpdnsd -c /etc ...
- java初始化过程中成员变量
package day01; class Base{ int j; //1.j=0 Base(){ add(1); //2.调用子类add()方法 System.out.println(j); //4 ...
- 63.当当网txt数据按行切割与合并
获取文件有多少行 //获取文件有多少行 int getN(char *path) { FILE *pf = fopen(path, "r"); if (pf==NULL) { ; ...
- qtcreator配置
如果是做嵌入式开发,那么宿主机使用的交叉编译的QT版本是必须和目标板上使用的qt版本一致的. 而且在路径上,如果qt使用的库如果不是放在目标板默认的连接库路径的话, 那么目标板qt程序就会到配置编译Q ...
- 【习题 7-3 UVA - 211】The Domino Effect
[链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 每次搜素要往下还是要往右摆. 然后维护一下让每个下标只出现一次就可以了. =>作为剪枝条件 [代码] /* 1.Shoud i ...