Image组件类似于iOS中UIImage控件,该组件可以通过多种方式加载图片资源。

使用方式,加载方式有如下几种:

/**
* Sample React Native App
* https://github.com/facebook/react-native
* 周少停
* image 加载的三种方式+设置图片的内容模式
*/ import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
Image,
View,
} from 'react-native' class Project extends Component {
render() {
return (
<View style={styles.container}>
<Text>加载工程中图片</Text>
<Image source={require('./imgs/1111.png')} style={{width:120,height:120}}/>
<Text>加载Xcode中asset的图片,也可以使用uri的方式加载</Text>
<Image source={require('image!520')} style={{width:120,height:120}} />
<Text>加载网络中的图片</Text>
<Image source={{uri:'https://unsplash.it/600/400/?random'}} style={{width:120,height:200}}/>
<Text>设置加载图片的模式</Text>
<Image source={{uri:'https://unsplash.it/600/400/?random'}} style={{width:120,height:200,resizeMode:Image.resizeMode.cover}}/>
<Image source={{uri:'https://unsplash.it/600/400/?random'}} style={{width:120,height:200,resizeMode:Image.resizeMode.contain}}/>
<Image source={{uri:'https://unsplash.it/600/400/?random'}} style={{width:120,height:200,resizeMode:Image.resizeMode.stretch}}/>
</View>
);
}
} const styles = StyleSheet.create({
container: {
flex: 1,
marginTop:20,//上边距
flexDirection:'column',//主轴方向 垂直
justifyContent: 'flex-start',//控件在主轴上的对齐方向
alignItems: 'flex-start', //控件在侧轴上的对齐方向
backgroundColor: '#F5FCFF',
}
}); AppRegistry.registerComponent('Project', () => Project);
/**
* Sample React Native App
* https://github.com/facebook/react-native
* 周少停 2016-09-13
* Imaage的常见属性
*/ import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
Image
} from 'react-native';
//导入json数据
var BadgeData = require('./BadgeData.json'); //定义一些全局变量
var Dimensions = require('Dimensions');
var {width} = Dimensions.get('window'); //屏宽
var cols = 3 //总列数
var boxW = 100; //单个盒子的宽度&高度
var vMargin = (width - cols*boxW)/(cols + 1);//盒子中间的水平间距
var hMargin = 25; class Project extends Component {
render() {
return (
<View style={styles.container}>
{/*返回包的数据*/}
{this.renderAllBadge()}
</View>
);
}
//返回所有的包
renderAllBadge(){
//定义一个数组,装每个包的信息
var allBadge = [];
//遍历json数据
for(var i=0;i<BadgeData.data.length;i++){
//去除单独的数据对象
var badge = BadgeData.data[i];
//直接装入数组
allBadge.push(
<View key={i} style={styles.outViewStyle}>
<Image source={{uri:badge.icon}} style={styles.imageStyle} />
<Text style={styles.mainTitleStyle}>
{badge.title}
</Text>
</View>
);
}
//返回数组
return allBadge;
}
} const styles = StyleSheet.create({
container: {
flex: 1,
marginTop:20,//上边距
flexDirection:'row',//主轴方向,水平
alignItems:'flex-start',//定义控件在侧轴上的对齐方式
flexWrap:'wrap',//是否换行
backgroundColor: '#F5FCFF'
},
outViewStyle: {
backgroundColor:'gray',
alignItems:'center',
width:boxW,
height:boxW,
marginLeft:vMargin,
marginBottom:hMargin
},
imageStyle:{
width:80,
height:80
},
mainTitleStyle:{
color:'white'
}
}); AppRegistry.registerComponent('Project', () => Project);

  

 完整源码下载:https://github.com/pheromone/React-Native-1 

React Native 组件之Image的更多相关文章

  1. React Native组件之Text

    React Native组件之Text相当于iOS中的UILabel. 其基本属性如下: /** * Sample React Native App * https://github.com/face ...

  2. React Native组件之Switch和Picker和Slide

    React Native组件Switch类似于iOS中的UISwitch:组件Slide类似于iOS中UIslider,组件Picker类似于iOS的UIPickerView.他们的使用方法和相关属性 ...

  3. React Native 组件之TextInput

    React Native 组件之TextInput类似于iOS中的UITextView或者UITextField,是作为一个文字输入的组件,下面的TextInput的用法和相关属性. /** * Sa ...

  4. beeshell —— 开源的 React Native 组件库

    介绍 beeshell 是一个 React Native 应用的基础组件库,基于 0.53.3 版本,提供一整套开箱即用的高质量组件,包含 JavaScript(以下简称 JS)组件和复合组件(包含 ...

  5. react native组件的生命周期

    react native组件的生命周期 一.当页面第一次加载时,会依次调用: constructor() componentWillMount(): 这个函数调用时机是在组件创建,并初始化了状态之后, ...

  6. react native组件的创建

    react native组件的创建 react文件加载顺序: react项目启动后,先加载index.js.在index.js中可以指向首页. import { AppRegistry } from ...

  7. React Native组件(三)Text组件解析

    相关文章 React Native探索系列 React Native组件系列 前言 此前介绍了最基本的View组件,接下来就是最常用的Text组件,对于Text组件的一些常用属性,这篇文章会给出简单的 ...

  8. React Native组件(二)View组件解析

    相关文章 React Native探索系列 React Native组件系列 前言 了解了RN的组件的生命周期后,我们接着来学习RN的具体的组件.View组件是最基本的组件,也是首先要掌握的组件,这一 ...

  9. Android React Native组件的生命周期及回调函数

    熟悉android的童鞋应该都清楚,android是有生命周期的,其很多组件也是有生命周期.今天小编和大家分享的React Native组件的生命周期,还不了解的童鞋,赶紧来围观吧 在android开 ...

  10. React Native组件解析(二)之Text

    React Native组件解析(二)之Text 1. 概述 Text组件对应于iOS的UILabel,Android的TextView,用来显示文本.但是Text组件的内部使用的并不是flexbox ...

随机推荐

  1. script "text/template"

    <script type="text/template" id="orgItem"> <div class="{orgClass}& ...

  2. poj1190 生日蛋糕(深搜+剪枝)

    题目链接:poj1190 生日蛋糕 解题思路: 深搜,枚举:每一层可能的高度和半径 确定搜索范围:底层蛋糕的最大可能半径和最大可能高度 搜索顺序:从底层往上搭蛋糕,在同一层尝试时,半径和高度都是从大到 ...

  3. 求平均排序MATLAB code

    A0=R(:,1:2:end); for i=1:17 A1=A0(i,:); p=sort(unique(A1)); for j=1:length(p) Rank0(A1==p(j))=j; end ...

  4. Nodejs异步异常处理domain

    前言 程序开发中,最麻烦的事情之一就是异常处理:对于Nodejs程序开发,最麻烦的事情莫过于异步异常处理. 以MVC的多层架构设计角度,异常总是要一层一层向上抛出,最后在客户端出打印错误.但是,Nod ...

  5. Storm(4) - Distributed Remote Procedure Calls

    Using DRPC to complete the required processing 1. Create a new branch of your source using the follo ...

  6. 获取IE代理服务器信息

    “局域网设置”里有自动配置.代理服务器的设置项目,在进行网络通讯相关的开发时,需要使用到它们,下边介绍如何将这些设置信息读取出来. 当“使用自动配置脚本”不使用时,使用WinHttpGetIEProx ...

  7. Octopus系列之开发中灵光点收集,先放到这里,后面会整理的

    项目中引用的组件 1.System.Data.SQLite.dll 自行编译 SQLite-1.0.66.0-source 3.5的框架:F:\Code\开源项目\SQLite\1.0.66.0_x8 ...

  8. php 大数据量及海量数据处理算法总结

    下面的方法是我对海量数据的处理方法进行了一个一般性的总结,当然这些方法可能并不能完全覆盖所有的问题,但是这样的一些方法也基本可以处理绝大多数遇到的问题.下面的一些问题基本直接来源于公司的面试笔试题目, ...

  9. 一模 (2) day1

    第一题: 题目大意: 设 2n 张牌分别标记为 1, 2, ..., n, n+1, ..., 2n,初始时这 2n 张牌按其标号从小到大排列.经一次洗牌后,原来的排列顺序变成 n+1, 1, n+2 ...

  10. 【STL】-deque的用法

    初始化: #include <deque> deque<float> fdeque; 算法: fdeque.push_front(f); fdeque.push_back(f) ...