[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布局即弹性布局,使用起来十分方便灵活 ...
随机推荐
- Spring 配置自动扫描原理说明
Spring利用IOC容器将所有的bean进行有秩序的管理维护,而实际项目中不可能在xml文件中创建bean,而是利用了Spring的组件自动扫描机制,通过在classpath自动扫描的方式把组件纳入 ...
- Onvif开发之服务端成功对接Rtsp视频流篇
前面篇介绍onvif服务端的发现功能,继续在之前的代码基础上完成一个RTSP流的工作,也就是客户端通过ONVIF协议来预览设备端在这个之前必须确定几个简单的条件1 设备端能被发现2 设备端支持RTSP ...
- 平板电脑上完美体验Windows 8 (视频)
平板电脑上完美体验Windows 8 (视频) 目前,计算机产业正面临重大变革,三网融合,云计算,物联网正加速终端产品的融合.4C融合成为终端产品的未来发展趋势,是4C融合的代表性产品,它破了传统的W ...
- Activemq去除认证
0.背景介绍 由于项目安全性的约束,不能在配置文件中暴露一些密码信息. 默认情况下,ActiveMQ在进行接发消息的时候会用户认证.通过ActiveMQ-client初始化ActiveMQConn ...
- Flask的快速入门详细笔记
Flask的框架结构对应关系及理解 1.简介 简单介绍下Flask是一个轻量级的web前端框架,不像django那样本身具备一套完整的页面体系,轻量级说明了完全可以自定义,从功能逻辑到业务处理,都可以 ...
- 【习题 8-6 UVA - 1611】 Crane
[链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 想把数字i从位置j移动到位置i 可以这样. 假设mov(x,y)表示将(x..x+len/2-1)和(x+len/2..y)交换. ...
- 【D3 API 中文手冊】
[D3 API 中文手冊] 声明:本文仅供学习所用,未经作者同意严禁转载和演绎 <D3 API 中文手冊>是D3官方API文档的中文翻译. 始于2014-3-23日,基于VisualCre ...
- activity-启动动画的设定(下面弹出出现,弹入下面消失)
1.今天为了把一个activity以dialog的形式显示,而且实现从开始的时候从底部往上弹出,结束的时候,从上往下消失,做了如下的工作. 1)如果把一个activity以dialog的形式显示? 这 ...
- POJ 1737 Connected Graph (大数+递推)
题目链接: http://poj.org/problem?id=1737 题意: 求 \(n\) 个点的无向简单(无重边无自环)连通图的个数.\((n<=50)\) 题解: 这题你甚至能OEIS ...
- robot framework 使用三:浏览器兼容性自己主动化
robot framework 測试浏览器兼容性 上图中黄色圈的地方默认什么都不写.是firefox浏览器,写上ie就是ie浏览器了 firefox最新版本号即可.ie须要设置: 1. IE选项设置的 ...