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. onvif开发总结

    ONVIF开发经验总结 ONVIF开发经验总结............................................................................. ...

  2. 73,QT指针数组实战(指针数组与数组指针)

    //指针数组,每一个指针都是一个MainWindow // MainWindow *w[3][4]; // for(int i=0;i<3;i++) // { // for(int j=0;j& ...

  3. 使用Redis配置JAVA_环境

    配置环境变量 1.安装完成后,右击"我的电脑",点击"属性",选择"高级系统设置": 2.选择"高级"选项卡,点击&qu ...

  4. 【Hello 2018 D】Too Easy Problems

    [链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 可以考虑把所有的题目按照ai排序. 然后顺序考虑最后做出来的题目个数和第i道题目的ai一样. 则1..i-1这些题目就没有用了. 值 ...

  5. 史上最简单,js并获取手机型号

    原先获取不了苹果系列的型号,但转换思路,先推断是否是苹果,再用分辨率获取型号 //获取手机型号函数begin function getPhoneType(){  //正则,忽略大写和小写 var pa ...

  6. 类似C语言格式化输出

    java se5引入的format方法可以用于PrintStream或PrintWriter对象,format方法模仿自C的printf(), 如果你比较怀旧的话,也可以用printf(). pack ...

  7. Impala是什么?

    Impala是Cloudera公司主导开发的新型查询系统,它提供SQL语义,能查询存储在Hadoop的HDFS和HBase中的PB级大数据.已有的Hive系统虽然也提供了SQL语义,但由于Hive底层 ...

  8. 【Java学习】Font字体类的用法介绍

    一.Font类简介 Font类是用于设置图形用户界面上的字体样式的,包括字体类型(例如宋体.仿宋.Times New Roman等).字体风格(例如斜体字.加粗等).以及字号大小. 二.Font类的引 ...

  9. MFC CListctr显示缩略图

    我们知道通过CImageList可以让listctr显示出图片,但是添加的图片大小必须和要CImageList 创建的图片大小一致,才能显示出来.最近遇到一个需求,需要把很多大小不一的jpeg图片通过 ...

  10. 如何运行vue项目(维护他人的项目)

    假如你是个小白,在公司接手他人的项目,这个时候,该怎么将这个项目跑通? 前提: 首先,这个教程主要针对vue小白,并且不知道安装node.js环境的.言归正传,下面开始教程:在维护项目之前,需要把所有 ...