RN中UIImage的使用

最新推荐文章于 2025-09-17 17:16:05 发布

原创最新推荐文章于 2025-09-17 17:16:05 发布 · 939 阅读

0 ·

CC 4.0 BY-SA版权

React Native 专栏收录该内容

12 篇文章

订阅专栏

本文介绍了React Native中UIImageView组件加载图片的三种方式：从项目中加载、从App中加载及从网络加载，并展示了图片圆角处理及不同拉伸模式的应用。

RN版本的UIImageView加载图片的方式

<View style={styles.container}>
  {/**从项目中加载图片**/}
  <Text>1.从项目中加载图片</Text>
  <Image source={require('./img/icon.png')} style={styles.imageStyle}/>
  <Text>2.从App中加载图片</Text>
  <Image source={{uri:'bd_logo1'}} style={styles.imageStyle}/>
  <Text>3.从网络加载图片</Text>
  <Image source={{uri:'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1497867485527&di=4964dcab3cfb2abab672622fdacf08e6&imgtype=0&src=http%3A%2F%2Fimg.qqai.net%2Fuploads%2Fi_1_3954819281x253773944_21.jpg'}} style={styles.imageStyle}/>
</View>

imageStyle :{
  width:160,
  height:160,
  borderRadius:80,
  resizeMode:'cover',
  // resizeMode:'contain',
  // resizeMode:'stretch',
}

这里有图片圆角处理，三种图片拉伸方式