[英]React Native Image component source as ES6 import images
Is it possible to import images and use them in the source
of an <Image />
component?是否可以导入图像并在<Image />
组件的source
中使用它们?
I have a lot of places where I need to conditionally display an icon or another, based on state.基于 state,我有很多地方需要有条件地显示图标或其他图标。 For example:例如:
{isToggled ? (
<Image
resizeMode='contain'
source={require('../../assets/images/icon_chevron_up_B82BF9.png')}
style={styles.toggleArrowImage}
/>
) : (
<Image
resizeMode='contain'
source={require('../../assets/images/icon_chevron_down_B82BF9.png')}
style={styles.toggleArrowImagew}
/>
)}
Or或者
const getToogleImageSource = () => {
if (isToggled) {
return require('../../assets/images/icon_chevron_up_B82BF9.png')
}
return require('../../assets/images/icon_chevron_down_B82BF9.png')
}
...
<Image
resizeMode='contain'
source={getToogleImageSource()}
style={styles.toggleArrowImagew}
/>
Looking at React Native documentation on Image , and search for this on StackOverflow, I always see solutions using require
to get the source.查看Image 上的 React Native 文档,并在 StackOverflow 上搜索它,我总是看到使用require
来获取源代码的解决方案。
Hence my question about using ES6 import like this to reduce the number of lines of code (I also find it easier to read):因此,我对使用这样的 ES6 导入来减少代码行数的问题(我也发现它更容易阅读):
import chevronDown from ('../../assets/images/icon_chevron_down_B82BF9.png')
import chevronUp from ('../../assets/images/icon_chevron_up_B82BF9.png')
...
<Image
resizeMode='contain'
source={isToggled ? chevronUp : chevronDown}
style={styles.toggleArrowImagew}
/>
I tested it locally and it works fine, so I am wondering if this would cause a problem with a standalone app, due to the packager or something I ignore.我在本地对其进行了测试,它工作正常,所以我想知道这是否会导致独立应用程序出现问题,因为打包程序或我忽略的东西。
FYI, I have this in app.json:仅供参考,我在 app.json 中有这个:
"assetBundlePatterns": [
"assets/images/*"
],
Thanks for you help.谢谢你的帮助。
[EDIT]: I forgot to mention that I am using Expo [编辑]:我忘了提到我正在使用 Expo
I'm using the following method when using images in the react-native app.在 react-native 应用程序中使用图像时,我使用以下方法。 Though this is still using the required
keyword, I get the following advantages which you are also seeking.虽然这仍然使用required
关键字,但我得到了您也在寻求的以下优势。
required
keyword for the same image in many places.更少的代码行和避免在许多地方为同一图像重复required
关键字的能力。Here is the implementation with 3 simple steps.这是具有 3 个简单步骤的实现。
assets
directory define an index file (index.tx)
.在您的assets
目录中定义一个索引文件(index.tx)
。 if you are using js index.js
如果您使用的是 js index.js
do your all imports in the index file在索引文件中进行所有导入
const images = { logo: require('./logo.png'), splash_image: require('./splash_image.png'), chevronUp: require('./chevronUp.png'), chevronUp: require('./chevronDown.png'), } export default images;
import the index.tx
to your component and use as follows.将index.tx
导入您的组件并按如下方式使用。 you can use any images by using image.filename
.您可以使用image.filename
使用任何图像。 and also no more require
keyword in your components.并且组件中不再require
关键字。
import images from '../../../assets'; ... <Image resizeMode='contain' source={isToggled? images.chevronUp: images.chevronDown} style={styles.toggleArrowImagew} />
hope this is what you are looking for:D希望这就是你要找的:D
UPDATE after trying with import
尝试import
后更新
just import the image as follows on the top fo the component.只需在组件顶部按如下方式导入图像。
import { ... , Image } from 'react-native';
import img_welcome from '../../images/welcome.png';
...
<Image source={img_welcome} />
this is perfectly working for me.这对我来说非常有用。
I don't have anything in the app.json except appnames我在 app.json 中没有任何内容,除了 appnames
The only difference I see from your code and my working code is having a pair of round bracket
()
in theimport
statement我从您的代码和我的工作代码中看到的唯一区别是import
语句中有一对圆括号()
Cheers!干杯!
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.