React Native Image 的相关设置

普通图片的需求可以有

图片的路径设置

图片的排布方式resizeMode，自动拉伸，自适应，居中，裁剪？

source属性，是一个对象，设置正确的值是一个带有uri属性的对象。

对图片的处理裁剪的方法

圆角图片的设置

import React,{Component} from 'react';
import {AppRegistry,View,Image} from 'react-native';
class RNCSDemo extends Component {
  render() {
    return (
        <View style={{flex:1,justifyContent:'center',backgroundColor:'aliceblue',alignItems:'center'}}>
            <Image source={require('./img/favicon.png')} />
            <Image source={{uri:'about_hjb'/*,crop: {left: 10, top: 50, width: 20, height: 40}*/ }}
                    style={{width: 60, height: 60,resizeMode:'center',backgroundColor:'green',
                     /*  center,  //居中全部显示,不会调整大小
                        contain, //自己调整大小以显示全图
                        cover,  //原图铺展开
                        repeat, //重复
                        stretch //被拉伸
                        */
                        borderColor:'red',
                        borderWidth:0.5, //边框宽度
                        margin:20,      //距边角
                        borderRadius: 30,//圆角
                }} 
            />
            <Image source={ {uri:'http://upload.jianshu.io/users/upload_avatars/1091358/a77d7fc495ac.jpg?imageMogr/thumbnail/90x90/quality/100'}}
                    style={{width: 40, height: 40 }} 
                 />
        </View>
   )
  }
}
AppRegistry.registerComponent('RNCSDemo', () => RNCSDemo);