react native Image 使用详解

Image是显示图片的组件。可以加载网络图片、静态资源、临时的本地图片、以及本地磁盘上的图片。本地磁盘上的图片需要在路径前加 ‘file://’。

resizeMode：组件尺寸和图片尺寸不成比例的时候调整图片的大小

cover: 在保持图片宽高比的前提下缩放图片，直到宽度和高度都大于等于容器视图的尺寸（如果容器有padding内衬的话，则相应减去）。译注：这样图片完全覆盖甚至超出容器，容器中不留任何空白。

contain: 在保持图片宽高比的前提下缩放图片，直到宽度和高度都小于等于容器视图的尺寸（如果容器有padding内衬的话，则相应减去）。译注：这样图片完全被包裹在容器中，容器中可能留有空白

stretch: 拉伸图片且不维持宽高比，直到宽高都刚好填满容器。

repeat: 重复平铺图片直到填满容器。图片会维持原始尺寸。仅iOS可用。

center: 居中不拉伸。

source：图片资源 opacity：透明度 blurRadius：模糊半径

Demo

/** * Created by on 2017/4/19. */ import React, {Component} from 'react'; import { StyleSheet, View, Image, ScrollView, Text, Button, } from 'react-native'; export default class ImageDemo extends Component { static navigationOptions = { title: 'Image', }; state={ resizeMode:'cover' } render() { return ( <ScrollView> <View> <Image source={require('../../imgs/s99.png')}/> <View style={{flexDirection:'row',alignItems:'center',flexWrap:'wrap'}}> <Text>设置resizeMode：</Text> <Button title='cover' onPress={()=>{this.setState({resizeMode:'cover'})}}/> <Button title='contain' onPress={()=>{this.setState({resizeMode:'contain'})}}/> <Button title='stretch' onPress={()=>{this.setState({resizeMode:'stretch'})}}/> <Button title='repeat' onPress={()=>{this.setState({resizeMode:'repeat'})}}/> <Button title='center' onPress={()=>{this.setState({resizeMode:'center'})}}/> </View> <Image style={{height:100,width:100}} source={require('../../imgs/s63.png')} resizeMode={this.state.resizeMode}/> <Image style={{height:100,width:100,opacity:0.5}} source={require('../../imgs/s63.png')} /> <Image style={{height:100,width:100}} source={require('../../imgs/s63.png')} blurRadius={30}/> <Image source={{uri: 'http://h5.86.cc/walls/20141217/mid_23b73a6904487a6.jpg'}} /> </View> </ScrollView> ); } }

github下载地址