React Native 组件之Image
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的更多相关文章
- React Native组件之Text
React Native组件之Text相当于iOS中的UILabel. 其基本属性如下: /** * Sample React Native App * https://github.com/face ...
- React Native组件之Switch和Picker和Slide
React Native组件Switch类似于iOS中的UISwitch:组件Slide类似于iOS中UIslider,组件Picker类似于iOS的UIPickerView.他们的使用方法和相关属性 ...
- React Native 组件之TextInput
React Native 组件之TextInput类似于iOS中的UITextView或者UITextField,是作为一个文字输入的组件,下面的TextInput的用法和相关属性. /** * Sa ...
- beeshell —— 开源的 React Native 组件库
介绍 beeshell 是一个 React Native 应用的基础组件库,基于 0.53.3 版本,提供一整套开箱即用的高质量组件,包含 JavaScript(以下简称 JS)组件和复合组件(包含 ...
- react native组件的生命周期
react native组件的生命周期 一.当页面第一次加载时,会依次调用: constructor() componentWillMount(): 这个函数调用时机是在组件创建,并初始化了状态之后, ...
- react native组件的创建
react native组件的创建 react文件加载顺序: react项目启动后,先加载index.js.在index.js中可以指向首页. import { AppRegistry } from ...
- React Native组件(三)Text组件解析
相关文章 React Native探索系列 React Native组件系列 前言 此前介绍了最基本的View组件,接下来就是最常用的Text组件,对于Text组件的一些常用属性,这篇文章会给出简单的 ...
- React Native组件(二)View组件解析
相关文章 React Native探索系列 React Native组件系列 前言 了解了RN的组件的生命周期后,我们接着来学习RN的具体的组件.View组件是最基本的组件,也是首先要掌握的组件,这一 ...
- Android React Native组件的生命周期及回调函数
熟悉android的童鞋应该都清楚,android是有生命周期的,其很多组件也是有生命周期.今天小编和大家分享的React Native组件的生命周期,还不了解的童鞋,赶紧来围观吧 在android开 ...
- React Native组件解析(二)之Text
React Native组件解析(二)之Text 1. 概述 Text组件对应于iOS的UILabel,Android的TextView,用来显示文本.但是Text组件的内部使用的并不是flexbox ...
随机推荐
- WPF:xmal 静动态资源
<StackPanel.Resources> <SolidColorBrush x:Key="myBrush" Color="Teal"/&g ...
- 《JavaScript权威指南》读书笔记(二)
日期:2015-12-04 js 的原型::闭包:闭包这是个相当复杂的东西...现在初步理解: http://segmentfault.com/a/1190000000652891 闭包有 ...
- springMvc配置编码过滤器
在web.xml中配置 <!-- 编码过滤器 --> <filter> <filter-name>characterEncodingFilter</filte ...
- struts2视频学习笔记 11-12(动态方法调用,接收请求参数)
课时11 动态方法调用 如果Action中存在多个方法时,可以使用!+方法名调用指定方法.(不推荐使用) public String execute(){ setMsg("execute&q ...
- poi 读取 excel(.xlsx) 2007及以上版本
1.注意的一点是sh.getLastRowNum(),比实际的行数少一行 涉及到的包:
- 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 ...
- priority_queue C++
三种优先队列定义方法:T_T 内部原理以后补..... priority_queue<int> qi;//普通的优先级队列,按从大到小排序 struct Node { friend boo ...
- spring mvc重定向页面
@RequestMapping(value="/del/{id}") public String delUser(@PathVariable int id){ return &qu ...
- 操作系统cmd算法
实验一 命令解释程序的编写(两周内) 一.目的和要求 1. 实验目的 (1)掌握命令解释程序的原理: (2)*掌握简单的DOS调用方法: (3)掌握C语言编程初步. 2.实验要求 编写类似于DOS, ...
- WinForm 中 VScrollBar Maximum 问题
最近在做一个鼠标经过弹出 TreeView 面板功能 , 要求鼠标离开TreeView区域,隐藏面板. 功能如期开发,其中当TreeView 出现滚动条时,鼠标经过TreeView中的滚动条时,提前 ...