Question

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

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

{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来减少代码行数的问题（我也发现它更易于阅读）：

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/*"
],

感谢您的帮助。

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

Answer 1

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

更少的代码行数，并且能够避免在很多地方对同一张图片使用重复的required关键字。
由于它是单个导入点，因此可以用一行代码来更改整个应用程序中的图像。
可读性很高

这里是实现的三个简单步骤。

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

在索引文件中完成所有导入

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

export default images;

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

这很适合我。

除了appnames，我在app.json中什么都没有

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

干杯！

在ES6导入图像时反应本机图像组件源

1 个答案: