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

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

  1. /**
  2. * Sample React Native App
  3. * https://github.com/facebook/react-native
  4. * 周少停
  5. * image 加载的三种方式+设置图片的内容模式
  6. */
  7.  
  8. import React, { Component } from 'react';
  9. import {
  10. AppRegistry,
  11. StyleSheet,
  12. Text,
  13. Image,
  14. View,
  15. } from 'react-native'
  16.  
  17. class Project extends Component {
  18. render() {
  19. return (
  20. <View style={styles.container}>
  21. <Text>加载工程中图片</Text>
  22. <Image source={require('./imgs/1111.png')} style={{width:120,height:120}}/>
  23. <Text>加载Xcodeasset的图片,也可以使用uri的方式加载</Text>
  24. <Image source={require('image!520')} style={{width:120,height:120}} />
  25. <Text>加载网络中的图片</Text>
  26. <Image source={{uri:'https://unsplash.it/600/400/?random'}} style={{width:120,height:200}}/>
  27. <Text>设置加载图片的模式</Text>
  28. <Image source={{uri:'https://unsplash.it/600/400/?random'}} style={{width:120,height:200,resizeMode:Image.resizeMode.cover}}/>
  29. <Image source={{uri:'https://unsplash.it/600/400/?random'}} style={{width:120,height:200,resizeMode:Image.resizeMode.contain}}/>
  30. <Image source={{uri:'https://unsplash.it/600/400/?random'}} style={{width:120,height:200,resizeMode:Image.resizeMode.stretch}}/>
  31. </View>
  32. );
  33. }
  34. }
  35.  
  36. const styles = StyleSheet.create({
  37. container: {
  38. flex: 1,
  39. marginTop:20,//上边距
  40. flexDirection:'column',//主轴方向 垂直
  41. justifyContent: 'flex-start',//控件在主轴上的对齐方向
  42. alignItems: 'flex-start', //控件在侧轴上的对齐方向
  43. backgroundColor: '#F5FCFF',
  44. }
  45. });
  46.  
  47. AppRegistry.registerComponent('Project', () => Project);
  1. /**
  2. * Sample React Native App
  3. * https://github.com/facebook/react-native
  4. * 周少停 2016-09-13
  5. * Imaage的常见属性
  6. */
  7.  
  8. import React, { Component } from 'react';
  9. import {
  10. AppRegistry,
  11. StyleSheet,
  12. Text,
  13. View,
  14. Image
  15. } from 'react-native';
  16. //导入json数据
  17. var BadgeData = require('./BadgeData.json');
  18.  
  19. //定义一些全局变量
  20. var Dimensions = require('Dimensions');
  21. var {width} = Dimensions.get('window'); //屏宽
  22. var cols = 3 //总列数
  23. var boxW = 100; //单个盒子的宽度&高度
  24. var vMargin = (width - cols*boxW)/(cols + 1);//盒子中间的水平间距
  25. var hMargin = 25;
  26.  
  27. class Project extends Component {
  28. render() {
  29. return (
  30. <View style={styles.container}>
  31. {/*返回包的数据*/}
  32. {this.renderAllBadge()}
  33. </View>
  34. );
  35. }
  36. //返回所有的包
  37. renderAllBadge(){
  38. //定义一个数组,装每个包的信息
  39. var allBadge = [];
  40. //遍历json数据
  41. for(var i=0;i<BadgeData.data.length;i++){
  42. //去除单独的数据对象
  43. var badge = BadgeData.data[i];
  44. //直接装入数组
  45. allBadge.push(
  46. <View key={i} style={styles.outViewStyle}>
  47. <Image source={{uri:badge.icon}} style={styles.imageStyle} />
  48. <Text style={styles.mainTitleStyle}>
  49. {badge.title}
  50. </Text>
  51. </View>
  52. );
  53. }
  54. //返回数组
  55. return allBadge;
  56. }
  57. }
  58.  
  59. const styles = StyleSheet.create({
  60. container: {
  61. flex: 1,
  62. marginTop:20,//上边距
  63. flexDirection:'row',//主轴方向,水平
  64. alignItems:'flex-start',//定义控件在侧轴上的对齐方式
  65. flexWrap:'wrap',//是否换行
  66. backgroundColor: '#F5FCFF'
  67. },
  68. outViewStyle: {
  69. backgroundColor:'gray',
  70. alignItems:'center',
  71. width:boxW,
  72. height:boxW,
  73. marginLeft:vMargin,
  74. marginBottom:hMargin
  75. },
  76. imageStyle:{
  77. width:80,
  78. height:80
  79. },
  80. mainTitleStyle:{
  81. color:'white'
  82. }
  83. });
  84.  
  85. 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. WPF:xmal 静动态资源

    <StackPanel.Resources> <SolidColorBrush x:Key="myBrush" Color="Teal"/&g ...

  2. 《JavaScript权威指南》读书笔记(二)

    日期:2015-12-04 js 的原型::闭包:闭包这是个相当复杂的东西...现在初步理解:    http://segmentfault.com/a/1190000000652891    闭包有 ...

  3. springMvc配置编码过滤器

    在web.xml中配置 <!-- 编码过滤器 --> <filter> <filter-name>characterEncodingFilter</filte ...

  4. struts2视频学习笔记 11-12(动态方法调用,接收请求参数)

    课时11 动态方法调用 如果Action中存在多个方法时,可以使用!+方法名调用指定方法.(不推荐使用) public String execute(){ setMsg("execute&q ...

  5. poi 读取 excel(.xlsx) 2007及以上版本

    1.注意的一点是sh.getLastRowNum(),比实际的行数少一行 涉及到的包:

  6. centos 5.8 64位系统安装 mysql5.6

    mysql5.5以上的版本编译需要 cmake         1 .安装cmake wget http://www.cmake.org/files/v2.8/cmake-2.8.10.2.tar.g ...

  7. priority_queue C++

    三种优先队列定义方法:T_T 内部原理以后补..... priority_queue<int> qi;//普通的优先级队列,按从大到小排序 struct Node { friend boo ...

  8. spring mvc重定向页面

    @RequestMapping(value="/del/{id}") public String delUser(@PathVariable int id){ return &qu ...

  9. 操作系统cmd算法

    实验一  命令解释程序的编写(两周内) 一.目的和要求 1. 实验目的 (1)掌握命令解释程序的原理: (2)*掌握简单的DOS调用方法: (3)掌握C语言编程初步. 2.实验要求 编写类似于DOS, ...

  10. WinForm 中 VScrollBar Maximum 问题

    最近在做一个鼠标经过弹出 TreeView  面板功能 , 要求鼠标离开TreeView区域,隐藏面板. 功能如期开发,其中当TreeView 出现滚动条时,鼠标经过TreeView中的滚动条时,提前 ...