ReactNative 基础 - 03 （图片 Image）

最新推荐文章于 2025-06-03 18:58:44 发布

黑猫了个怪怪

最新推荐文章于 2025-06-03 18:58:44 发布

阅读量251

点赞数

CC 4.0 BY-SA版权

文章标签： react native react.js javascript

本文链接：https://blog.csdn.net/Janicecat/article/details/121981534

这篇博客主要介绍了在React Native中如何处理远程和本地图片的加载，包括设置图片宽高以及实现图片模糊效果的方法。示例代码展示了如何使用`<Image>`组件，并通过`blurRadius`属性来创建模糊效果。此外，还提到了通过遍历方式引入本地图片的数组数据结构。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、远程图片使用：远程的图片，默认引入后，宽高都为0，需要设置宽高

2、本地图片，require语法，但是不需要加.default后缀

blurRadius：图片模糊，值为数字

<Image  source={{uri: 'http://www…..png'}}  style={{height: 180}} />
<Image source={require('./assets/1.jpg')} style={{width: 400, height: 200}}/>
 {/* 模糊 */}
<Image
    source={require('./assets/1.jpg')}
    style={{width: 400, height: 200}}
    blurRadius={10}
/>

如果是通过遍历引入本地图片，需要在数组中这样写：

  data = [    
    { title: '商品管理', icon: require('../assets/menu_product.jpg')},
    { title: '用户管理',icon: require('../assets/menu_user.jpg')},
    { title: '订单管理',icon: require('../assets/menu_order.jpg')},
    { title: '首页管理',icon: require('../assets/menu_refresh.jpg')},
  ];