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的更多相关文章

  1. CSS3 flexbox 布局 ---- flex项目属性介绍

    现在介绍用在flex项目上的css 属性,html结构还是用ul, li 结构,不过内容改成1,2,3, 样式的话,直接把给 ul 设display:flex 变成flex 容器,默认主轴的方向为水平 ...

  2. CSS3 flexbox 布局 ---- flex 容器属性介绍

    flexbox布局是CSS3中新增的属性,它可以很轻松地帮我们解决掉一些常见的布局问题,比如导航栏. 我们用普通的方法写导航栏,通常会在ul, li 结构写好后,让li 元素左浮动,然后再给ul 清浮 ...

  3. 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 ...

  4. 弹性盒式布局flexbox(dispaly:flex)

    display:flex flex-direction: row(行)/column(列)/row-reverse/column-reverse反方向  //布局 justify-content: s ...

  5. Flex布局 Flexbox属性具体解释

    原文:A Visual Guide to CSS3 Flexbox Properties Flex布局官方称为CSS Flexble Box布局模型是CSS3为了提高元素在容器中的对齐.方向.顺序,甚 ...

  6. CSS3 Flexbox轻松实现元素的水平居中和垂直居中

    CSS3 Flexbox轻松实现元素的水平居中和垂直居中 网上有很多关于Flex的教程,对于Flex的叫法也不一,有的叫Flexbox,有的叫Flex,其实这两种叫法都没有错,只是Flexbox旧一点 ...

  7. 响应式布局:Flexbox应用总结

    距离上篇文章<布局神器:Flexbox>的发表已有一周时间,转眼这周又到了周五(O(∩_∩)O~~): 习惯性在周五对自己的一周工作进行下总结,记录下这周值得被纪念的工作事件,无论是好的, ...

  8. CSS3 Flexbox轻巧实现元素的水平居中和垂直居中

    CSS3 Flexbox轻松实现元素的水平居中和垂直居中 网上有很多关于Flex的教程,对于Flex的叫法也不一,有的叫Flexbox,有的叫Flex,其实这两种叫法都没有错,只是Flexbox旧一点 ...

  9. Flex布局-容器的属性

    本文部分内容参考阮一峰大神博客,原文地址:http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html Flex布局即弹性布局,使用起来十分方便灵活 ...

随机推荐

  1. Fragment-两种使用方式

    这篇我们就用实例来看看我们在代码中如何使用Fragment 一:静态添加Fragment 新建一个项目,添加两个Fragment的布局文件fragment_title,fragment_content ...

  2. WebMethod Description

    http://www.webxml.com.cn/WebServices/WeatherWebService.asmx https://www.cnblogs.com/wanganyi/p/72202 ...

  3. .Net 程序在自定义位置查找托管/非托管 dll 的几种方法

    原文:.Net 程序在自定义位置查找托管/非托管 dll 的几种方法 一.自定义托管 dll 程序集的查找位置 目前(.Net4.7)能用的有2种: #define DEFAULT_IMPLEMENT ...

  4. [Javascript] Identify the most important words in a document using tf-idf in Natural

    Tf-idf, or term frequency-inverse document frequency, is a statistic that indicates how important a ...

  5. 动态库dll使用module.def文件导出函数(像静态库一样使用)

    1.新建文件module.def. 2.动态库工程上右键->属性->链接器->输入->模块定义文件编辑它写入module.def 3.下面为module.def实例(smart ...

  6. Writing buffer overflow exploits - a tutorial for beginners

    Buffer overflows in user input dependent buffers have become one of the biggest security hazards on ...

  7. node中间层

    node中间层 一.总结 1.node中间层作用:前端也是mvc,NodeJS之后,前端可以更加专注于视图层,而让更多的数据逻辑放在Node层处理 2.node中间层作用:当发现所有请求量太多应付不过 ...

  8. matlab 局部特征检测与提取(问题与特征)

    物体识别:SIFT 特征: 人脸识别:LBP 特征: 行人检测:HOG 特征: 0. 常见手工设计的低级别特征 manually designed low-level features 语音:高斯混合 ...

  9. 41.关于Intellij IDEA菜单项中Compile、Make和Build的区别

    转自:https://www.cnblogs.com/ini_always/archive/2011/10/23/2221985.html Compile.Make和Build的区别   针对Java ...

  10. 116.C语言异常抛错

    #include <stdlib.h> #include <stdio.h> #include <setjmp.h> //异常抛错检测 jmp_buf buf1; ...