Question

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

例如，如果我有一个名为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不支持动态图像名称吗？

React native error with dynamic image name

Answer 1

这对我有用：

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

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

这将在＆＃34; Static Resources＆＃34;

部分的文档中介绍。

在捆绑中引用图片的唯一允许方法是在源代码中写下require（＆＃39; image！of the-property-of-asset＆＃39;）。

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

如果您已知道图片（网址），则相关：

我在这个问题上遇到的方式：

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

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

export { images };

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

import { images } from 'relative/path';

if (cond === 'cat') {
  let imgSource = images.cat.uri;
}

<Image source={imgSource} />

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

希望它有所帮助！

Answer 4

首先，创建一个带有所需图像的文件-必须以这种方式加载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';

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

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

Answer 5

例如，如果您正在寻找一种通过遍历图像和描述的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 6

你可以使用

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

使用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')
          }
        
        
        ]

}

按下按钮时-（我选择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 8

如果您的应用程序具有与我的功能相似的功能，请说。您的应用通常离线的地方，并且您想要一个接一个地渲染图像。然后下面是在React Native版本0.60中对我有用的方法。

首先创建一个名为 Resources / Images 的文件夹，然后将所有图像放在此处。
现在创建一个名为 Index.js 的文件（位于“资源/图像”中），该文件负责为资源/图像文件夹中的所有图像建立索引。

const Images = { 'image1'：require（'./ 1.png'）， 'image2'：require（'./ 2.png'）， 'image3'：require（'./ 3.png'） }

现在在您选择的文件夹中创建一个名为ImageView的组件。可以创建功能，类或常量组件。我已经使用了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组件并传递索引即可。

Answer 9

我知道这很旧，但是我在寻找解决方案时发现了这个问题，因此将其添加到这里。该文档允许使用uri：“网络图片”

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

对我来说，我可以使图像动态工作

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

Answer 10

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

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

在我的情况下，我做了很多尝试，但最终都成功了 StyledInput组件名称 如果您仍然不明白，请在StyledInput内输入图片

Answer 11

此处的重要部分：我们无法在要求中合并图像名称，例如[require（'item'+ vairable +'。png'）]

步骤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;

如果您想要详细的解释，可以点击下面的链接访问https://www.thelearninguy.com/react-native-require-image-using-dynamic-names

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

Answer 12

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 13

作为React Native Documentation says，在编译包之前必须先加载所有图像源

因此，可以使用动态图像的另一种方法是使用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 14

创建一个常量，用于保存包含 require 的图像路径，然后在源代码中输入该常量的名称。

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

<Image source={image} />

Answer 15

你应该使用一个对象。

例如，我们说我已经向API发出了一个AJAX请求，它返回了一个我保存为imageLink状态的图片链接：

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

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

15 个答案: