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下载地址