React Native Image 组件源作为 ES6 导入图像

Question

是否可以导入图像并在<Image />组件的source中使用它们？

基于 state，我有很多地方需要有条件地显示图标或其他图标。 例如：

{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}
  />
)}

或者

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} 
/>

查看Image 上的 React Native 文档，并在 StackOverflow 上搜索它，我总是看到使用require来获取源代码的解决方案。

因此，我对使用这样的 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} 
/>

我在本地对其进行了测试，它工作正常，所以我想知道这是否会导致独立应用程序出现问题，因为打包程序或我忽略的东西。

仅供参考，我在 app.json 中有这个：

"assetBundlePatterns": [
  "assets/images/*"
],

谢谢你的帮助。

[编辑]：我忘了提到我正在使用 Expo

Answer 1

在 react-native 应用程序中使用图像时，我使用以下方法。 虽然这仍然使用required关键字，但我得到了您也在寻求的以下优势。

• 更少的代码行和避免在许多地方为同一图像重复required关键字的能力。
• 由于它是单点导入，因此可以通过一行代码更改整个应用程序中的图像。
• 非常高的可读性

---

这是具有 3 个简单步骤的实现。

1. 在您的assets目录中定义一个索引文件(index.tx) 。 如果您使用的是 js index.js

2. 在索引文件中进行所有导入

   const images = { logo: require('./logo.png'), splash_image: require('./splash_image.png'), chevronUp: require('./chevronUp.png'), chevronUp: require('./chevronDown.png'), } export default images;

3. 将index.tx导入您的组件并按如下方式使用。 您可以使用image.filename使用任何图像。 并且组件中不再require关键字。

    import images from '../../../assets'; ... <Image resizeMode='contain' source={isToggled? images.chevronUp: images.chevronDown} style={styles.toggleArrowImagew} />

希望这就是你要找的：D

---

---

尝试import后更新

只需在组件顶部按如下方式导入图像。

import { ... , Image } from 'react-native';
import img_welcome from '../../images/welcome.png';

...

<Image source={img_welcome} />

这对我来说非常有用。

我在 app.json 中没有任何内容，除了 appnames

我从您的代码和我的工作代码中看到的唯一区别是import语句中有一对圆括号()

干杯!