Bug Native Reagieren FlatList

Question

Ich habe ein Problem mit der gebürtigen FlatList Reaktion,

export default class PoolList extends Component { 
    constructor(props) { 
     super(props) 
     this.state = { 
      data: [ 
      {key: 1, img: './resources/image1.png', txt: 'Text 1'}, 
      {key: 2, img: './resources/image2.png', txt: 'Text 2'}, 
      {key: 3, img: './resources/image3.png', txt: 'Text 3'} 
      ] 
     } 
     } 

     render() { 
     return (
      <View style={styles.view}> 
      <FlatList 
       data={this.state.data} 
       renderItem={({item}) => 
        <View style={styles.flatListItem}> 
        <Image source={require(item.img)} /> 
        <Text>{item.txt}</Text> 
        </View> 
       } 
      /> 

      </View> 
     ); 
    } 
} 

ich einen Bug bekam, wenn es ausgeführt

require()

eine einzige Stringliteral Argument haben muss

Aber wenn ich ändern <Image source={require(item.img)} /> bis <Image source={require('./resources/image1.png')} />, es funktioniert. Kann mir jemand erklären warum. Ich brauche eine FlatList mit Bild dynamisch, Danke

Answer 1

Es dauerte eine ganze Weile, um eine Umgehungsmöglichkeit für dieses Problem herauszufinden. Keine Sorge, require() must have a single string literal argument ist ein wirklich häufiges Problem in der JavaScript-Community, da require viele Probleme mit Variablen hat, die als String-Argument übergeben werden.

Dies ist die beste Problemumgehung, die ich mir vorstellen konnte.

Also anstatt eine Flatlist zu verwenden, entschied ich mich für eine Karte. Als Erstes müssen Sie constants für jedes Bild erstellen, das Sie dynamisch aus einem lokalen Verzeichnis importieren möchten. Dann müssen Sie eine array von objects erstellen, so dass jeder object einer Ihrer image constants sein wird. Jetzt durchlaufen Sie jeden Eintrag mit dem map und generieren Sie Ihre <Image> Komponenten. Rendern Sie schließlich die Variable mit allen soeben erstellten Komponenten.

Um den vollständigen Code für die Lösung, die ich schrieb, zu sehen, besuchen Sie die ExpoSnack, die ich erstellt habe.
https://snack.expo.io/HyNO-pLQG
SnackExpo hat auch einen In-Browser-Gerätesimulator enthalten.
Um diese App auf Ihrem physischen Gerät auszuführen, können Sie die Expo-App herunterladen und dann den von der ExpoSnack bereitgestellten QR-Code scannen.

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

const image1 = require('./resources/image1.png'); 
const image2 = require('./resources/image2.png'); 
const image3 = require('./resources/image3.png'); 

const styles = StyleSheet.create({ 
    container: { 
    flex: 1, 
    alignItems: 'center', 
    justifyContent: 'center', 
    }, 
    image: { 
    width: 200, 
    height: 200, 
    }, 
}); 

var dataArray = [ 
    {data: image1}, 
    {data: image2}, 
    {data: image3}, 
]; 

var theReturnData = dataArray.map((item) => (
    <View key={item}> 
    <Image 
     style={styles.image} 
     source={item.data} 
    /> 
    </View> 
)); 

export default class App extends Component { 
    render() { 
    return (
     <View style={styles.container}> 
     {theReturnData} 
     </View> 
    ); 
    } 
}