Reactnative图片组件Image

Reactnative图片组件Image
Reactnative内建了图片组件image来显示图片，这个组件既可以显示本地图片，也可以显示网络图片，还可以显示base64格式的图片
引入组件
使用Image组件首先要引入此组件
import {Image} from 'react-native
案例

import React,{Component} from 'react';
import {View,AppRegistry,Image,ScrollView} from 'react-native';


export default class App extends Component{
  render(){
    return(
      <ScrollView>
        {/* 普通图片设置 */}
        <Image 
          source={require('./assets/1.png')}
        />
        {/* 网络图片设置 */}
        <Image
          style={{margin:10,width:177,height:100}}
          source={{uri:'http://www.twle.cn/static/i/img1.jpg'}}
        />
        {/* 图片显示模式，contain，安装正常的比例缩放到整个可以刚好放进来 */}
        <Image
        style={{margin:10,width:200,height:200,resizeMode:'contain',borderWidth:1,borderColor:'#000'}}
        source={require('./assets/1.png')}
        />
        {/* 直接将图片拉升成设置的大小，会变形 */}
        <Image 
         style={{margin:10,width:200,height:200,resizeMode:'cover',borderWidth:1,borderColor:'#000'}}
         source={require('./assets/1.png')}
        />
        {/* 拉伸图片 */}
         <Image 
         style={{margin:10,width:200,height:200,resizeMode:'stretch',borderWidth:1,borderColor:'#000'}}
         source={require('./assets/1.png')}
        />
      </ScrollView>
    )
  }
}