[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布局即弹性布局,使用起来十分方便灵活 ...
随机推荐
- 一题多解(三)—— Python 字符串的拼接
1. format def event_log(name, time): print('Event: {}, happens at {}'.format(name, str(time))) 2. 使用 ...
- ToString DateTime 操作
来源:网络 字符型转换为字符串// C 货币 2.5.ToString("C"); // ¥2.50 // D 10进制数 25.ToString("D5"); ...
- 关于vue.js中v-model与表单控件的双向绑定。
单选框:<input type="checkbox" id="checkbox" v-model="checked"><l ...
- 【Pycharm】【HTML】注释问题
学习HTML中,遇到的注释前存在空行的问题: 只要找到Pycharm设置中:勾选去掉即可
- 【Codecraft-18 and Codeforces Round #458 (Div. 1 + Div. 2, combined) D】Bash and a Tough Math Puzzle
[链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 对于1操作 令len = r-l+1 等价于查找l..r这个范围内x的倍数的个数是否大于等于len-1 也即l..r这个范围内不是x ...
- WIN8.1的安装和打开"这台电脑"速度很慢的解决办法
WIN8.1的安装和打开"这台电脑"速度很慢的解决办法 对于非服务器用的电脑,如果电脑的内存在2G或更高,首推的操作系统是 WINDOWS8.1 64位企业版,用了就知道,没有比这流畅懂事的操作系统. ...
- Bitmap Image Graphics
Bitmap Image Graphics private void DrawImagePointF(PaintEventArgs e){ // Create image. Image new ...
- ByteUtils
package sort.bing.com; import java.io.ByteArrayOutputStream;import java.io.DataOutputStream;import j ...
- layui中select的注意
假如不在select 标签里面加上过滤lay-filter 那么你就算怎么绑定事件都是没有任何效果 页面上代码 js文件:
- CSRF Failed: Referer checking failed - no Referer
postman模拟登录出了这个错误,其实看标题就知道大概是怎么回事,网上大概找了办法,也没说到位,所以干脆自己找源码了. 问题很明显就是出在 CSRF 上,理所当然去查看 CsrfViewMiddle ...