React Native中Image的source动态路径

最新推荐文章于 2024-04-07 14:26:28 发布
最新推荐文章于 2024-04-07 14:26:28 发布
阅读量9.3k 收藏 5
点赞数 3
文章标签： react native Image require
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_39711712/article/details/79126193
版权

Image的source的require不能拼接，要实现不同操作对应不同图片，如选择列表的多个图片

先定义图片数组

 this.WBModePic = {
        "first":require('../resources/images/AWB.png'),
       "sec": require('../resources/images/AWB.png'),
}
<Image style={{height:40,width:40}}
    source={this.WBModePic["first"]}/>

"first"换作变量

实现图片的操作变换
Simon_youth
关注
  • 3
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
ReactNative Image组件使用详解
08-29
ReactNative Image 组件是用于显示图片的组件，在 ReactNative 中与开发 Android 时的 ImageView 控件相同的效果。它可以用来显示网络图片、静态资源、临时的本地图片、以及本地磁盘上的图片（如相册）等。恰当的...
【React-native】<Image> 组件如何从前一界面动态获取 source
冯一朔 - 有思考的程序员
11-16 983
今天，想通过前一界面传source的地址来对通用页面的图片样式进行更改，而不是单一的死地址，但是前一页面直接传地址的字符串是不行的，会报错，经研究，发现使用如下方式即可。 父界面： 在父界面中，给定一个属性，值直接为 require('../../image/payment.png')  &lt;CommonWeights dataSo...
React Native学习之 Image组件
zoujin6649的博客
03-19 325
静态图片资源 React Native提供了一个统一的方式来管理iOS和Android应用中的图片。要往APP中添加一个静态图片，只需把图片文件放在代码文件夹中某处，然后像下面这样去引用它： <Image source={require('./my-icon.png')} /> 注意：一些老文章和教程提到的require('image!xxx')的写法已经从0.40版本开始不再...
react native中动态加载<Image>
kalinux的博客
06-26 986
1，使用SwipeableFlatList的时候：希望动态加载图片。下面是错误使用： const data=[ {key:1,label:"hello", img: '../images/1.png ' }, {key:2,label:"hello", img: '../images/2.png' }, {key:3,label:"hello", img: '../images/3.p...
React Native - Image组件的使用详解（加载资源、网络、本地图片）
热门推荐
public_calss的专栏
05-04 1万+
转至：http://www.hangge.com/blog/cache/detail_1542.htmlReact Native - Image组件的使用详解（加载资源、网络、本地图片）2017-02-21发布：hangge阅读：10479一、Image组件介绍同 HTML 的 img 元素一样，React Native 提供的 Image 组件可以用来显示各种途径的图片，比如网络图片、本地磁盘图...
React-Native开发五 React Native 的Image组件
带你装逼带你飞的专栏
07-14 4841
1 Image组件介绍 RN中Image组件主要用于加载图片，可加载静态图片，网络图片，以及原生图片，本地文件系统中图片资源 官方参考https://facebook.github.io/react-native/docs/image#resizemode 2 Image组件功能 加载图片一般使用Image的source属性 1 加载静态图片 静态图片是指js下的图片资源，例如放在源码...
DemoImage ReactNative
10-26
针对React native在 Android TV端开发的图片加载组件，不支持IOS，支持焦点，点击，遥控器按键，以及其他Fresco支持的大部分功能！
react-native-image-view：用于缩放查看图像的模态组件
02-05
尝试博览会： ： 警告：自v2.0.0起重大更改： 代替prop source => images 页脚没有标题道具，请改用renderFooter安装yarn add react-native-image-view 要么npm install --save react-native-image-view演示版用法...
react-native-image-progress:React Native 中网络图像的进度指示器
08-04
React Native 中网络图像的进度指示器 安装 yarn add react-native-image-progress 注意：进度指示器已分解为一个单独的组件； 。 要使用它们，请按照该软件包的安装说明进行操作。 用法 import Image from '...
探究react-native 源码的图片缓存问题
08-29
例如，如果我们在 JS 端设置 Image 组件的 source 属性为一个网络图片的 URL，那么 React Native 会将其缓存在内存中。但是，如果我们在 JS 端再次设置 Image 组件的 source 属性为同一个 URL，那么 React Native ...
React Native 之Image 组件
李浩然的专栏
03-29 896
1.加载网络图片 import React, { Component } from 'react'; import { AppRegistry, Image, View } from 'react-native'; export default class ViewProject extends Component { render() { return (
React Native常用组件Image使用
weixin_38289699的博客
01-10 358
Image组件的常见属性 属性方法 onLoad(function）:当图片加载成功后，回调该方法onLoadStart（function）:当图片开始加载的时候调用该方法onLoadEnd(function）:当图片加载失败回调该方法，不会管图片加载成功还是失败onLayout（function）:当 Image 布局发生变化会调用该方法，调用代码 
react-native如何动态引用本地图片
我们一起学前端
02-29 865
一、创建一个图片引用模块 二、使用图片引用模块
从零学React Native之08Image组件
weixin_34008805的博客
08-12 55
开发过程中, 几乎每个项目都会用到图片. RN就是通过Image组件显示图片。既可以加载网络图片,也可以加载本地资源图片。 Image组件必须在样式中声明图片的款和高。如果没有声明，则图片将不会被呈现在界面上。 网络图片加载 加载网络图片非常简单， 直接上代码： 修改index.ios.js或者inde.android.j...
react-native动态引用本地图片
火星男孩的分享空间
07-08 1038
参考： icon 来源于阿里巴巴图库 react-native如何动态引用本地图片 Icon.js export default { //注意这里导入： 同级目录需要前面加 './' ，否则会出错 avatar1: require('./avatar01.png'), avatar2: require('./avatar02.png'), avatar3: require('./avatar03.png'), avatar4: require('./avatar04.
React Native组件篇（二） — Image组件(1)
最新发布
2401_84092778的博客
04-07 410
整理面试题，不是让大家去只刷面试题，而是熟悉目前实际面试中常见的考察方式和知识点，做到心中有数，也可以用来自查及完善知识体系。《前端基础面试题》，《前端校招面试题精编解析大全》，《前端面试题宝典》，《前端面试题：常用算法》PDF完整版点击这里领取/>整理面试题，不是让大家去只刷面试题，而是熟悉目前实际面试中常见的考察方式和知识点，做到心中有数，也可以用来自查及完善知识体系。《前端基础面试题》，《前端校招面试题精编解析大全》，《前端面试题宝典》，《前端面试题：常用算法》PDF完整版点击这里领取。
react native Image png 及gif的圆角
LoveEate的博客
01-17 911
react native Image png 圆角 &lt;Image style={{width:100,height:100 ,borderRadius:50 }}  source={'图片'.png}/&gt; react native Image gif 圆角 第一种： &lt;Image style={{width:100,height:100 ,borderRadius:50,...
React Native的Image的source={require()}拼接bug
linxuanasd的博客
04-04 882
require()他不能拼接 在数组中写好图片路径，直接arr.url，放在require()是不生效的。 如下图所示 { arr.map((item, i) => { return<TouchableOpacity key={i} style={styles.frame}> <Image style={styles.photo}
RN（react native）入坑指南-02,一个登录示例
如是我闻
04-09 724
Github上发现一只登录示例，拿来尝鲜,这里需要注意的坑有如下两点 1.关于注释，恩… // 单行 /*多行 */这个自然不用说，需要说的是，你得在外面加一层{}给包起来2.win下引用静态资源图片会出现引用到显示不出来的Bug(此bug0.13版本后已经修复)，关于这个问题参考链接1,2里给出了不同的解决方案，我这里采用的是Stackoverflow的解决方式。 官方的说法
在 React Native 中，new Image 会出错怎么办
06-09
在 React Native 中，使用 `new Image()` 的方式来加载图片可能会出现一些问题，因为 React Native 中没有 `Image` 构造函数的实现。但是，React Native 提供了 `Image` 组件来加载图片，使用方法如下： ```javascript import React from 'react'; import { Image } from 'react-native'; const MyImage = () => { return ( <Image source={{ uri: 'https://example.com/image.jpg' }} style={{ width: 200, height: 200 }} /> ); }; export default MyImage; ``` 在这个例子中，`Image` 组件接收 `source` 属性来指定图片的地址，使用 `style` 属性来指定图片的大小和样式。 如果你需要在代码中动态加载图片，可以根据需要使用 `require` 或者 `require.resolveAssetSource` 方法来获取图片资源的地址，例如： ```javascript import React from 'react'; import { Image } from 'react-native'; const MyImage = () => { const imgSource = require('./path/to/image.jpg'); return ( <Image source={imgSource} style={{ width: 200, height: 200 }} /> ); }; export default MyImage; ``` 在这个例子中，`require` 方法会根据相对路径加载图片资源，并返回一个可用于 `Image` 组件的 `source` 对象。 如果你需要动态加载网络上的图片，可以使用 `require.resolveAssetSource` 方法来获取图片的真实地址，例如： ```javascript import React from 'react'; import { Image } from 'react-native'; const MyImage = ({ imageUrl }) => { const imgSource = { uri: imageUrl }; const resolvedSource = Image.resolveAssetSource(imgSource); return ( <Image source={resolvedSource} style={{ width: 200, height: 200 }} /> ); }; export default MyImage; ``` 在这个例子中，`Image.resolveAssetSource` 方法会根据给定的 `source` 对象，返回一个包含真实地址的新对象，可用于 `Image` 组件的 `source` 属性。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值