Native reagieren - Image Require-Modul mit dynamischen Namen

Ich erstelle gerade eine Test-App mit React Native. Das Image-Modul hat bisher einwandfrei funktioniert.

Wenn ich beispielsweise ein Bild mit dem Namen hatte avatar, funktioniert das folgende Codefragment einwandfrei.

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

Aber wenn ich es in eine dynamische Zeichenfolge ändere, bekomme ich

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

Ich bekomme den Fehler:

Unbekanntes Modul "image! Avatar" erforderlich. Wenn Sie sicher sind, dass das Modul vorhanden ist, starten Sie den Packager neu.

Natürlich ist dies ein erfundenes Beispiel, aber dynamische Bildnamen sind wichtig. Unterstützt React Native keine dynamischen Bildnamen?

Dies wird in der Dokumentation im Abschnitt " Statische Ressourcen " behandelt:

Die einzige Möglichkeit, auf ein Bild im Bundle zu verweisen, besteht darin, require ('image! Name des Assets') buchstäblich in die Quelle zu schreiben.

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

Sie müssen jedoch auch daran denken, Ihre Bilder zu einem xcassets-Bundle in Ihrer App in Xcode hinzuzufügen, obwohl es aus Ihrem Kommentar hervorgeht, dass Sie dies bereits getan haben.

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

Das hat bei mir funktioniert:

Ich habe eine benutzerdefinierte Bildkomponente erstellt, die einen Booleschen Wert verwendet, um zu überprüfen, ob das Bild aus dem Web stammt oder aus einem lokalen Ordner übergeben wird.

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

Wenn Sie den Code sehen, anstatt einen der folgenden zu verwenden:

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

Ich schicke das Ganze nur require('./images/logo.png')als Requisite. Es klappt!

RELEVANT, WENN SIE BEKANNTE BILDER (URLS) HABEN:

So habe ich mich durch dieses Problem gehackt:

Ich habe eine Datei mit einem Objekt erstellt, in dem das Bild und der Name des Bildes gespeichert sind:

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

Dann habe ich das Objekt in die Komponente importiert, in der ich es verwenden möchte, und meine bedingte Darstellung wie folgt durchgeführt:

import { images } from 'relative/path';

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

<Image source={imgSource} />

Ich weiß, dass dies nicht der effizienteste Weg ist, aber es ist definitiv eine Problemumgehung.

Ich hoffe es hilft!

Wenn Sie nach einer Möglichkeit suchen, eine Liste zu erstellen, indem Sie beispielsweise ein JSON-Array Ihrer Bilder und Beschreibungen durchlaufen, funktioniert dies für Sie.

1. Erstellen Sie eine Datei (für unsere JSON-Datenbank), z. B. 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;

2. Importieren Sie dann die Daten in unsere Komponente und durchlaufen Sie die Liste mit einer 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>
  )}
/>

Viel Glück!

Wie in der React Native-Dokumentation angegeben, müssen alle Ihre Bildquellen geladen werden, bevor Sie Ihr Bundle kompilieren können

Eine andere Möglichkeit, dynamische Bilder zu verwenden, ist die Verwendung einer switch-Anweisung. Angenommen, Sie möchten einen anderen Avatar für einen anderen Charakter anzeigen. Sie können Folgendes tun:

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

Überprüfen Sie den Snack: https://snack.expo.io/@abranhe/dynamic-images

Denken Sie auch daran, wenn Ihr Bild online ist, haben Sie keine Probleme. Sie können Folgendes tun:

let superhero = "spiderman";

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

Erstellen Sie zunächst eine Datei mit dem erforderlichen Bild. - Reagieren Sie auf diese Weise müssen native Bilder geladen werden.

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');

Importieren Sie nun alle Ihre Assets

App.js.

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

Sie können Ihr Bild jetzt als interpolierten Wert verwenden, wobei imageValue (vom Backend eingehend) mit der benannten lokalen Datei identisch ist, dh: 'homeandgarden':

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

Wichtiger Teil hier: Wir können den Bildnamen nicht in der Anforderung wie [erfordern ('item' + vairable + '. Png')] verknüpfen

Schritt 1: Wir erstellen eine ImageCollection.js-Datei mit der folgenden Sammlung von Bildeigenschaften

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")
}

Schritt 2: Importieren Sie das Bild in Ihre App und bearbeiten Sie es nach Bedarf

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;

Wenn Sie eine ausführliche Erklärung wünschen, können Sie dem folgenden Link folgen. Besuchen Sie https://www.thelearninguy.com/react-native-require-image-using-dynamic-names

Mit freundlicher Genehmigung von https://www.thelearninguy.com

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

Sie können verwenden

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

Bild zeigen.

von:

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

Für ein dynamisches Bild mit

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

}

wenn ich die Taste drücke- (ich wähle Bild Zufallszahl zwischen 0-2))

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

Aussicht

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

Ich weiß, dass dies alt ist, aber ich werde dies hier hinzufügen, da ich diese Frage gefunden habe, während ich nach einer Lösung gesucht habe. Die Dokumente ermöglichen eine URL: 'Network Image'

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

Für mich habe ich Bilder, die dynamisch damit arbeiten

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

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

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

In meinem Fall habe ich so viel versucht, aber schließlich funktioniert es StyledInput Komponentenname Bild im StyledInput, wenn Sie immer noch nicht verstehen, lassen Sie es mich wissen

Sagen Sie, wenn Sie eine Anwendung haben, die ähnliche Funktionen wie meine hat. Wo Ihre App meistens offline ist und Sie die Bilder nacheinander rendern möchten. Im Folgenden finden Sie den Ansatz, der in React Native Version 0.60 für mich funktioniert hat.

1. Erstellen Sie zunächst einen Ordner mit dem Namen Ressourcen / Bilder und platzieren Sie alle Ihre Bilder dort.
2. Erstellen Sie nun eine Datei mit dem Namen Index.js (at Resources / Bilder) , die für die Indizierung alle die Bilder in den verantwortlich ist Reources / Bilder - Ordner.

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

3. Erstellen Sie nun eine Komponente mit dem Namen ImageView in einem Ordner Ihrer Wahl. Man kann funktionale, Klassen- oder konstante Komponenten erstellen. Ich habe die Const-Komponente verwendet. Diese Datei ist abhängig vom Index für die Rückgabe des Bildes verantwortlich.

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;

4. Verwenden Sie nun von der Komponente aus, wo immer Sie die statischen Bilder dynamisch rendern möchten, einfach die ImageView-Komponente und übergeben Sie den Index.

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

Sie sollten dafür ein Objekt verwenden.

Angenommen, ich habe eine AJAX-Anforderung an eine API gesendet und sie gibt einen Bildlink zurück, den ich speichern werde, um Folgendes anzugeben imageLink:

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