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. 设置https验证方式

    if (url.StartsWith("https", StringComparison.OrdinalIgnoreCase))

  2. stm8开发环境配置及测试

    需要准备的软件,硬件,IAR for stm8 (EWSTM8).stm8s标准固件库.ST-LINK.STM8s003f3核心板 安装IAR(其中包括st-link的驱动), 到这个网址下载stm8 ...

  3. 71.sscanf数据挖掘

    数据挖掘 sscanf(str, "%d %s %s %d %d %s %s %s", &ph[i].id, ph[i].name, ph[i].sex, &ph[ ...

  4. Python操作MySQL数据库完成简易的增删改查功能

    说明:该篇博客是博主一字一码编写的,实属不易,请尊重原创,谢谢大家! 目录 一丶项目介绍 二丶效果展示 三丶数据准备 四丶代码实现 五丶完整代码 一丶项目介绍 1.叙述 博主闲暇之余花了10个小时写的 ...

  5. 《机器学习实战》基于朴素贝叶斯分类算法构建文本分类器的Python实现

    ============================================================================================ <机器学 ...

  6. [Phonegap+Sencha Touch] 移动开发76 让cordova app訪问远端站点也能调用cordova插件功能

    原文链接:http://blog.csdn.net/lovelyelfpop/article/details/50735395 我相信.应该会有一些cordova开发人员想过实现以下这种app: 使用 ...

  7. android设置Activity背景色为透明的3种方

    方法一:这种方法比较简单,只有一个步骤,只需要在配置文件中把需要设置为透明的activity的样式设置为 Android:theme="@android:style/Theme.Transl ...

  8. 右键菜单添加Total Commander

    Windows Registry Editor Version 5.00 [HKEY_CLASSES_ROOT\Folder\shell\OpeninTC]@="使用TotalCmd打开(& ...

  9. xpath使用方法详解id 、starts-with、contains、text()和last() 的用法

    1.XPATH使用方法 使用XPATH有如下几种方法定位元素(相比CSS选择器,方法稍微多一点): a.通过绝对路径定位元素(不推荐!) WebElement ele = driver.findEle ...

  10. Django的命令

    安装django          : pip install django 创建django项目   :django-admin startproject projectname 启动django项 ...