React Native Image 的相關(guān)設(shè)置

普通圖片的需求可以有

• 圖片的路徑設(shè)置
• 圖片的排布方式resizeMode，自動拉伸，自適應(yīng)，居中，裁剪？
• source屬性，是一個對象，設(shè)置正確的值是一個帶有uri屬性的對象。
• 對圖片的處理裁剪的方法
• 圓角圖片的設(shè)置

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,  //居中全部顯示,不會調(diào)整大小
                        contain, //自己調(diào)整大小以顯示全圖
                        cover,  //原圖鋪展開
                        repeat, //重復(fù)
                        stretch //被拉伸
                        */
                        borderColor:'red',
                        borderWidth:0.5, //邊框?qū)挾?                        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);