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);
