React Native - 使用动态名称的图像需要模块

Question

我目前正在使用 React Native 构建一个测试应用程序。到目前为止，图像模块一直运行良好。

例如，如果我有一张名为 avatar 的图片，下面的代码片段可以正常工作。

<Image source={require('image!avatar')} />

但是如果我将其更改为动态字符串，我会得到

<Image source={require('image!' + 'avatar')} />

我收到错误：

Requiring unknown module "image!avatar". If you are sure the module is there, try restarting the packager.

显然，这是一个人为的例子，但动态图像名称很重要。 React Native 不支持动态图片名称吗？

Answer 1

你应该为此使用一个对象。

例如，假设我向 API 发出了 AJAX 请求，它 returns 我将保存到 state 的图像 link作为 imageLink:

source={{uri: this.state.imageLink}}

Answer 2

这包含在“Static Resources”部分的文档中：

The only allowed way to refer to an image in the bundle is to literally write require('image!name-of-the-asset') in the source.

// GOOD
<Image source={require('image!my-icon')} />

// BAD
var icon = this.props.active ? 'my-icon-active' : 'my-icon-inactive';
<Image source={require('image!' + icon)} />

// GOOD
var icon = this.props.active ? require('image!my-icon-active') : require('image!my-icon-inactive');
<Image source={icon} />

但是，您还需要记住在 Xcode 中将图像添加到应用程序中的 xcassets 包中，尽管从您的评论看来您已经这样做了。

http://facebook.github.io/react-native/docs/image.html#adding-static-resources-to-your-app-using-images-xcassets

Answer 3

你可以使用

<Image source={{uri: 'imagename'}} style={{width: 40, height: 40}} />

显示图像。

来自：

https://facebook.github.io/react-native/docs/images.html#images-from-hybrid-app-s-resources

Answer 4

这对我有用：

我制作了一个自定义图像组件，它接受一个布尔值来检查图像是来自网络还是从本地文件夹传递。

// In index.ios.js after importing the component
<CustomImage fromWeb={false} imageName={require('./images/logo.png')}/>

// In CustomImage.js which is my image component
<Image style={styles.image} source={this.props.imageName} />

如果您看到代码，请不要使用其中之一：

// NOTE: Neither of these will work
source={require('../images/'+imageName)} 
var imageName = require('../images/'+imageName)

我只是将整个 require('./images/logo.png') 作为道具发送。 有效！

Answer 5

如果您有已知图像（URL）则相关：

我破解这个问题的方式：

我创建了一个包含存储图像和图像名称的对象的文件：

export const ANIMAL_IMAGES = {
  dog: {
    imgName: 'Dog', 
    uri: require('path/to/local/image')
  },
  cat: {
    imgName: 'Cat on a Boat', 
    uri: require('path/to/local/image')
  }
}

然后我将对象导入到我想使用它的组件中，然后像这样进行条件渲染：

import { ANIMAL_IMAGES } from 'path/to/images/object';

let imgSource = null;

if (condition === 'cat') {
  imgSource = ANIMAL_IMAGES.cat.uri;
}

<Image source={imgSource} />

我知道这不是最有效的方法，但绝对是一种解决方法。

希望对您有所帮助！

Answer 6

我知道这是旧问题，但我会在此处添加它，因为我在寻找解决方案时发现了这个问题。文档允许使用 uri：'Network Image'

https://facebook.github.io/react-native/docs/images#network-images

对我来说，我得到了动态处理的图像

<Image source={{uri: image}} />

Answer 7

例如，如果您正在寻找一种通过循环遍历图像和描述的 JSON 数组来创建列表的方法，这将适合您。

创建一个文件（保存我们的 JSON 数据库）例如 ProfilesDB.js:

const Profiles = [
  {
    id: '1',
    name: 'Peter Parker',
    src: require('../images/user1.png'),
    age: '70',
  },
  {
    id: '2',
    name: 'Barack Obama',
    src: require('../images/user2.png'),
    age: '19',
  },
  {
    id: '3',
    name: 'Hilary Clinton',
    src: require('../images/user3.png'),
    age: '50',
  },
];

export default Profiles;

然后在我们的组件中导入数据并使用 FlatList 遍历列表：

import Profiles from './ProfilesDB.js';

<FlatList
  data={Profiles}
  keyExtractor={(item, index) => item.id}
  renderItem={({item}) => (
    <View>
      <Image source={item.src} />
      <Text>{item.name}</Text>
    </View>
  )}
/>

祝你好运！

Answer 8

 <StyledInput text="NAME" imgUri={require('../assets/userIcon.png')} ></StyledInput> 

<Image
            source={this.props.imgUri}
            style={{
              height: 30,
              width: 30,
              resizeMode: 'contain',
            }}
          />

在我的例子中，我尝试了很多但最终它起作用了 StyledInput 组件名称 StyledInput 中的图像如果您仍然不明白，请告诉我

Answer 9

此处重要部分： 我们不能像 [require('item'+vairable+'.png')]

那样在 require 中连接图像名称

第 1 步：我们使用以下图像属性集合创建一个 ImageCollection.js 文件

ImageCollection.js
================================
export default images={
    "1": require("./item1.png"),
    "2": require("./item2.png"),
    "3": require("./item3.png"),
    "4": require("./item4.png"),
    "5": require("./item5.png")
}

第 2 步：在您的应用中导入图像并根据需要进行操作

class ListRepoApp extends Component {

    renderItem = ({item }) => (
        <View style={styles.item}>
            <Text>Item number :{item}</Text>
            <Image source={Images[item]}/>
        </View>
    );

    render () {
        const data = ["1","2","3","4","5"]
        return (
            <FlatList data={data} renderItem={this.renderItem}/>
        )
    }
}

export default ListRepoApp;

如果你想要详细的解释你可以按照下面的link 访问 https://www.thelearninguy.com/react-native-require-image-using-dynamic-names

礼貌：https://www.thelearninguy.com

Answer 10

import React, { Component } from 'react';
import { Image } from 'react-native';

class Images extends Component {
  constructor(props) {
    super(props);
    this.state = {
           images: {
                './assets/RetailerLogo/1.jpg': require('../../../assets/RetailerLogo/1.jpg'),
                './assets/RetailerLogo/2.jpg': require('../../../assets/RetailerLogo/2.jpg'),
                './assets/RetailerLogo/3.jpg': require('../../../assets/RetailerLogo/3.jpg')
            }
    }
  }

  render() {
    const {  images } = this.state 
    return (
      <View>
        <Image
                            resizeMode="contain"
                            source={ images['assets/RetailerLogo/1.jpg'] }
                            style={styles.itemImg}
                        />
     </View>
  )}
}

Answer 11

As the React Native Documentation says, all your images sources needs to be loaded before compiling your bundle

因此，另一种使用动态图像的方法是使用 switch 语句。假设您想为不同的角色显示不同的头像，您可以这样做：

class App extends Component {
  state = { avatar: "" }

  get avatarImage() {
    switch (this.state.avatar) {
      case "spiderman":
        return require('./spiderman.png');
      case "batman":
        return require('./batman.png');
      case "hulk":
        return require('./hulk.png');
      default:
        return require('./no-image.png');
    }
  }

  render() {
    return <Image source={this.avatarImage} />
  }
}

查看小吃：https://snack.expo.io/@abranhe/dynamic-images

此外，请记住，如果您的图片在线，您没有任何问题，您可以这样做：

let superhero = "spiderman";

<Image source={{ uri: `https://some-website.online/${superhero}.png` }} />

Answer 12

首先，创建一个包含所需图像的文件 - React 原生图像必须以这种方式加载。

assets/index.js

export const friendsandfoe = require('./friends-and-foe.png'); 
export const lifeanddeath = require('./life-and-death.png'); 
export const homeandgarden = require('./home-and-garden.png');

现在导入您的所有资产

App.js

import * as All  from '../../assets';

您现在可以将图像用作插值，其中图像值（来自后端）与命名的本地文件相同，即：'homeandgarden':

<Image style={styles.image} source={All[`${imageValue}`]}></Image>

Answer 13

假设您的应用程序与我的应用程序具有相似的功能。您的应用程序大部分处于离线状态并且您希望一个接一个地渲染图像。下面是在 React Native 版本 0.60 中对我有用的方法。

首先创建一个名为 Resources/Images 的文件夹，然后将所有图像放在那里。
现在创建一个名为Index.js（位于Resources/Images）的文件，负责索引[=中的所有图像41=] 文件夹。

const Images = { 'image1': require('./1.png'), 'image2': require('./2.png'), 'image3': require('./3.png') }

现在在您选择的文件夹中创建一个名为 ImageView 的组件。可以创建函数式、class 或常量组件。我使用了 Const 组件。该文件负责根据索引返回图像。

import React from 'react';
import { Image, Dimensions } from 'react-native';
import Images from './Index';
const ImageView = ({ index }) => {
    return (
        <Image
            source={Images['image' + index]}
        />
    )
}
export default ImageView;

现在，无论您想动态呈现静态图像的组件，只需使用 ImageView 组件并传递索引即可。

< ImageView 索引={this.qno + 1} />

Answer 14

动态图片使用require

this.state={
       //defualt image
       newimage: require('../../../src/assets/group/kids_room3.png'),
       randomImages=[
         {
            image:require('../../../src/assets/group/kids_room1.png')
          },
         {
            image:require('../../../src/assets/group/kids_room2.png')
          }
        ,
         {
            image:require('../../../src/assets/group/kids_room3.png')
          }
        
        
        ]

}

当按下按钮时-(i select图像随机数在0-2之间))

let setImage=>(){
//set new dynamic image 
this.setState({newimage:this.state.randomImages[Math.floor(Math.random() * 3)];
})
}

查看

<Image
        style={{  width: 30, height: 30 ,zIndex: 500 }}
        
        source={this.state.newimage}
      />

Answer 15

在保存图像路径（包括要求）的地方创建一个常量，然后在源代码中输入该常量的名称。

const image = condition ? require("../img/image1.png") : require('../img/image2.png');

<Image source={image} />

Answer 16

如果您的文件数量较多，这里有一个简单而真正动态的解决方案。

[不适用于 Expo Managed]

虽然问题很老，但我认为这是更简单的解决方案，可能会有帮助。但请原谅任何术语错误，如果我有任何错误请指正。

不使用 REQUIRE 我们可以将 URI 与 原生应用程序资产 一起用于 ANDROID (AND/OR iOS)。 这里我们只讨论ANDROID

URI 可以根据要求轻松操作，但通常它仅用于 network/remote 资产，但也适用于本地和本机资产。而 require 不能用于动态文件名和 dirs

步骤

从您的 App.js 或 index.js 包含目录打开 android/app/src/main/assets 文件夹，如果 assets 文件夹不存在，请创建一个。
在 assets 中创建一个名为 images 或您选择的任何 NAME 的文件夹，并将所有图像粘贴到那里。
在包含 App.js 或 index.js 的主应用程序文件夹中创建一个名为 react-native.config.js 的文件。
将这些行添加到新的 js 文件中：


module.exports = {
  project: {
    ios: {},
    android: {},
  },
  assets: ['./assets/YOUR_FOLDER_NAME/'],
};

在 YOUR_FOLDER_NAME 处使用新创建的文件夹名称 images 或任何给定的 NAME

现在运行 npx react-native link 在您的终端中从主应用程序文件夹，这将 link/add android 包中的资产文件夹。然后重建调试应用程序。
从现在开始，您可以在您的 react-native 应用程序中访问 android/app/src/main/assets 中的所有文件。例如：

<Image
   style={styles.ImageStyle}
   source={{ uri: 'asset:/YOUR_FOLDER_NAME/img' + Math.floor(Math.random() * 100) + '.png' }}
/>

React Native - 使用动态名称的图像需要模块

React Native - Image Require Module using Dynamic Names

javascript

jsx

react-native