首页 > 代码库 > React Native 组件之Image
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的图片</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 = http://www.mamicode.com/require(‘./BadgeData.json‘);>
React Native 组件之Image
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。