Wie kann ich Bilder in "Reactive Native Component" bedingt einfügen?

Question

Ich bin in der Lage, statische Bilder zu einer Zelle ListView ganz gut hinzufügen (siehe Code unten), aber wie ändere ich das Symbol Bild dynamisch?

Von React Native Docs

<Image source={require('./img/check.png')} /> 

ist der empfohlene Weg, Bilddateien für beide iOS und Android zu verweisen.

Ich habe eine Komponente namens ExpandingCell, die die Option hat, eine Reihe von verschiedenen Symbolen zu zeigen, aber alles andere bleibt gleich.

In einem ListView schaffe ich eine cell Objekt und es dann in die ExpandingCell passieren

das Listview Datenquellen-Array wie folgt aussieht zu machen:

var LIST_DATA = [ 
... 
    {type: 'ExpandingCell', 
    icon: './CellIcons/MagnifyingGlassIcon.png', //unused 
    title: 'Lorem Ipsum', 
    detail: 'Donec id elit non mi porta gravida at eget metus.'}, 
... 
]; 

dann in renderCell Methode sie die oben geben wird Zellobjekt:

renderCell(cell) { 
    if (cell.type === 'ExpandingCell') { 
     return (
      <ExpandingCell cell={cell} /> 
     ); 
    } 
} 

Jetzt in ExpandingCell ich habe dies für render():

render() { 
    return (
     ... 
     <Image source{ 
      require('./CellIcons/MagnifyingGlassIcon.png') 
     }> 
     </Image> 
     ... 
    ); 
} 

Allerdings, wenn ich versuchen, Verwendung von this.props.cell.icon wie diese zu machen:

<Image source={require(this.props.cell.icon)}></Image> 

ich die folgende Fehlermeldung erhalten: Requiring unknown module "./CellIcons/MagnifyingGlassIcon.png".

Vielen Dank im Voraus =)

Answer 1

Die Bilder müssen während des Verpackens bekannt sein. Es gibt einen Abschnitt darüber in der docs.

das Setzen am Anfang der Datei definieren Sie ExpandingCell in:

const MAGNIFYING_GLASS_ICON = require('./CellIcons/MagnifyingGlassIcon.png'); 

Dann können Sie die Konstante verwenden wie dieses

let icon = someCondition ? MAGNIFYING_GLASS_ICON : SOME_OTHER_ICON; 
<Image source={icon}/> 

Sie haben die haben erfordert für alle Bilder, die Sie wollen um diesen Weg dorthin zu benutzen.