React Native组件只Image
不管在Android还是在ios原生的开发中,图片都是作为控件给出来的,在RN中也有这么一个控件(Image)。根据官网的资料,图片分为本地静态图片,网络图片和混合app资源。一下分类介绍来源官网。
静态图片资源
<Image source={require('./my-icon.png')} />
图片文件的查找会和JS模块的查找方式一样。在上面的这个例子里,是哪个组件引用了这个图片,Packager就会去这个组件所在的文件夹下查找my-icon.png。并且,如果你有my-icon.ios.png和my-icon.android.png,Packager就会根据平台而选择不同的文件。二对于ios还可能有2倍图和3倍图的区分。
├── button.js
└── img
├── check@2x.png
└── check@3x.png
// 正确
<Image source={require('./my-icon.png')} />
// 错误
var icon = this.props.active ? 'my-icon-active' : 'my-icon-inactive';
<Image source={require('./' + icon + '.png')} />
// 正确
var icon = this.props.active ? require('./my-icon-active.png') : require('./my-icon-inactive.png');
<Image source={icon} />
混合App的图片资源
<Image source={{uri: 'app_icon'}} style={{width: 40, height: 40}} />
网络图片
// 正确
<Image source={{uri: 'https://facebook.github.io/react/img/logo_og.png'}}
style={{width: 400, height: 400}} />
// 错误
<Image source={{uri: 'https://facebook.github.io/react/img/logo_og.png'}} />
加载本地图库图片
static saveImageWithTag(tag) 保存一个图片到相册。
@param {string} tag 在安卓上,本参数是一个本地URI,例如"file:///sdcard/img.png".
在iOS设备上可能是以下之一:
本地URI
资源库的标签
非以上两种类型,表示图片数据将会存储在内存中(并且在本进程持续的时候一直会占用内存)。
返回一个Promise,操作成功时返回新的URI。
static getPhotos(params: object) 获取图片
返回一个带有图片标识符对象的Promise。返回的对象的结构参见getPhotosReturnChecker。
@param {object} 要求的参数结构参见getPhotosParamChecker.
返回一个Promise,操作成功时返回符合getPhotosReturnChecker结构的对象。
典型使用方法
import ImagePickerManager from 'NativeModules'; 当你想展示相机还是相册这个选择器时:(变量options还有其它的设置,一些使用它的默认值就可以满足我们的要求,以下是我使用到的) var options = { title: 'Select Avatar', // 选择器的标题,可以设置为空来不显示标题 cancelButtonTitle: 'Cancel', takePhotoButtonTitle: 'Take Photo...', // 调取摄像头的按钮,可以设置为空使用户不可选择拍照 chooseFromLibraryButtonTitle: 'Choose from Library...', // 调取相册的按钮,可以设置为空使用户不可选择相册照片 customButtons: { 'Choose Photo from Facebook': 'fb', // [按钮文字] : [当选择这个按钮时返回的字符串] }, mediaType: 'photo', // 'photo' or 'video' videoQuality: 'high', // 'low', 'medium', or 'high' durationLimit: 10, // video recording max time in seconds maxWidth: 100, // photos only默认为手机屏幕的宽,高与宽一样,为正方形照片 maxHeight: 100, // photos only allowsEditing: false, // 当用户选择过照片之后是否允许再次编辑图片 }; ImagePickerManager.showImagePicker(options, (response) => { console.log('Response = ', response); if (response.didCancel) { console.log('User cancelled image picker'); } else if (response.error) { console.log('ImagePickerManager Error: ', response.error); } else if (response.customButton) { // 这是当用户选择customButtons自定义的按钮时,才执行 console.log('User tapped custom button: ', response.customButton); } else { // You can display the image using either data: if (Platform.OS === 'android') { source = {uri: response.uri, isStatic: true}; } else { source = { uri: response.uri.replace('file://', ''), isStatic: true }; } this.setState({ avatarSource: source }); } });
<Image source={this.state.avatarSource} style={styles.uploadAvatar} />
// Launch Camera: ImagePickerManager.ImagePickerManager.launchCamera(options, (response) => { // Same code as in above section! }); // Open Image Library: ImagePickerManager.ImagePickerManager.launchImageLibrary(options, (response) => { // Same code as in above section! });
复杂功能介绍
import React, { Component } from 'react'; import { AppRegistry, StyleSheet, Text, View, Image } from 'react-native'; // 导入JSON数据 var productData = require('./productData.json'); var Dimensions = require('Dimensions'); var screenW = Dimensions.get('window').width; // 定义一些全局的变量 var cols = 3; var boxW = 100; var vMargin = (screenW - cols * boxW) / (cols + 1); var hMargin = 20; class ImageDemo extends Component { render() { return ( <View style={styles.container}> {/*返回商品列表*/} {this.renderAllProduct()} </View> ); } // 返回商品列表 renderAllProduct() { // 定义数组装所有子组件 var allProduct = []; console.log(productData.data.length); // 遍历json数据 for(var i=0;i<productData.data.length;i++){ // 取出单个商品数据对象 var product = productData.data[i]; // 装入数组 allProduct.push( <View key={i} style={styles.outViewStyle}> <Image source={{uri:product.icon}} style={styles.iconStyle}/> <Text style={styles.nameStyle}>{product.name}</Text> </View> ); } // 最后要返回数组 return allProduct; } } const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: '#F5FCFF', marginTop:20, // 设置主轴的方向 flexDirection:'row', // 换行显示 flexWrap:'wrap' }, outViewStyle:{ backgroundColor:'grey', // 设置侧轴对齐方式 alignItems:'center', width:boxW, height:boxW, marginLeft:vMargin, marginBottom:hMargin }, iconStyle:{ width:80, height:80 }, nameStyle:{ alignItems:'center', // 文字颜色 color:"#fff" } }); AppRegistry.registerComponent('ImageDemo', () => ImageDemo);
{ "data": [ {"icon":"1.jpg", "name":"名称一"}, {"icon":"2.jpg", "name":"名称二"}, {"icon":"3.jpg", "name":"名称三"}, {"icon":"4.jpg", "name":"名称四"}, {"icon":"5.jpg", "name":"名称五"}, {"icon":"6.jpg", "name":"名称六"} ] }
React Native组件只Image的更多相关文章
- beeshell —— 开源的 React Native 组件库
介绍 beeshell 是一个 React Native 应用的基础组件库,基于 0.53.3 版本,提供一整套开箱即用的高质量组件,包含 JavaScript(以下简称 JS)组件和复合组件(包含 ...
- react native组件的生命周期
react native组件的生命周期 一.当页面第一次加载时,会依次调用: constructor() componentWillMount(): 这个函数调用时机是在组件创建,并初始化了状态之后, ...
- React Native组件(三)Text组件解析
相关文章 React Native探索系列 React Native组件系列 前言 此前介绍了最基本的View组件,接下来就是最常用的Text组件,对于Text组件的一些常用属性,这篇文章会给出简单的 ...
- React Native组件(二)View组件解析
相关文章 React Native探索系列 React Native组件系列 前言 了解了RN的组件的生命周期后,我们接着来学习RN的具体的组件.View组件是最基本的组件,也是首先要掌握的组件,这一 ...
- React Native组件的结构和生命周期
React Native组件的结构和生命周期 一.组件的结构 1.导入引用 可以理解为C++编程中的头文件. 导入引用包括导入react native定义的组件.API,以及自定义的组件. 1.1 导 ...
- React Native组件间通信
React Native组件间通信 React Native组件的关系有:父子关系.无直接关系.组件间通信主要针对这两类来讨论. 一.父组件和子组件之间通信 父组件向子组件传递消息.数据通过对子组件的 ...
- 【RN - 基础】之React Native组件的生命周期
下图描述了React Native中组件的生命周期: 从上图中可以看到,React Native组件的生命周期可以分为初始化阶段.存在阶段和销毁阶段. 实例化阶段 实例化阶段是React Native ...
- 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.他们的使用方法和相关属性 ...
随机推荐
- [Codeforces 864B]Polycarp and Letters
Description Polycarp loves lowercase letters and dislikes uppercase ones. Once he got a string s con ...
- [USACO14DEC]驮运Piggy Back
题目描述 Bessie 和 Elsie在不同的区域放牧,他们希望花费最小的能量返回谷仓.从一个区域走到一个相连区域,Bessie要花费B单位的能量,Elsie要花费E单位的能量. 如果某次他们两走到同 ...
- APIO 2015
老师让我们打这套题练练手.感觉这套题还是挺有意思的,比国内某些比赛不知道高到哪里去.最后我拿了284/300,貌似比赛是IOI赛制啊,强行被当成OI赛制做了,不然我T3可能还能多骗点. T1.scul ...
- poj3580 splay树 REVOVLE循环
SuperMemo Time Limit: 5000MS Memory Limit: 65536K Total Submissions: 12795 Accepted: 3989 Case T ...
- [poj2451]Uyuw's Concert
半平面交滴裸题,但是要求nlogn,练练手 #include<iostream> #include<cstdio> #include<cmath> #include ...
- bzoj3622已经没有什么好害怕的了 dp+组合+容斥(?)
3622: 已经没有什么好害怕的了 Time Limit: 10 Sec Memory Limit: 256 MBSubmit: 1033 Solved: 480[Submit][Status][ ...
- oracle 分页查询数据重复问题
最近在做项目的时候发现一个问题,oracle 在查询分页数据的时候,有几条数据重复查询了,并且有几条数据在分页的时候消失了.百度了一下发现,ORACLE 在查询数据的时候返回的行不是固定的,他只是按照 ...
- spring boot新建项目启动报:Unregistering JMX-exposed beans on shutdown
原因为:SpringBoot内置Tomcat没有正常启动,在pom.xml 中添加: <dependency> <groupId>org.springframework.boo ...
- Python paramik
本节内容 paramiko模块 1.paramiko模块 Python的paramiko模块,该模块机遇SSH用于连接远程服务器并执行相关操作 Python的paramiko模块,该模块机遇SSH用于 ...
- Linux下的crontab定时、执行任务命令详解 oracle 自动备份
在LINUX中,周期执行的任务一般由cron这个守护进程来处理[ps -ef|grep cron].cron读取一个或多个配置文件,这些配置文件中包含了命令行及其调用时间.cron的配置文件称为&qu ...