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

Question

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

我有很多地方需要根据状态有条件地显示图标或其他图标。 例如：

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

查看React Native documentation on Image，并在 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 语句中有一对圆括号 ()

干杯！