ローカルイメージを表示するには、React Nativeの "Unknown named module"で終わります。

Question

ローカルイメージのリストを動的に表示しようとします。これは、.img /というフォルダに保存されています。 React Nativeは実装に "Unknown named module：、./img/a1.jpg"というエラーをスローします。私は動的にイメージを必要とする問題について読んだが、問題を解決することはできなかった。何か提案はありますか？

export class ImageList extends React.Component { 
    constructor() { 
    super(); 
    } 
    render() { 
    const datav2 = [ 
     "./img/a1.jpg", 
     "./img/a6.jpg" 
    ]; 
    const lapsList = datav2.map((data) => { 
     var testPath = require(data); 
     return (
     <View> 
      <Image source={testPath} style={{width: 50, height: 50, backgroundColor: "#33ff00"}} /> 
     </View> 
    ) 
    }) 
    return (
     <View> 
     {lapsList} 
     </View> 
    ); 
    } 
} 

Answer 1

あなたは、アレイ内に直接requireを追加することによって、動的ロードを削除することができます。また

render() { 
    const datav2 = [ 
    require("./img/a1.jpg"), 
    require("./img/a6.jpg"), 
    ]; 
    const lapsList = datav2.map((data) => { 
    return (
     <View> 
     <Image source={data} style={{width: 50, height: 50, backgroundColor: "#33ff00"}} /> 
     </View> 
    ) 
    }) 
    return (
    <View> 
     {lapsList} 
    </View> 
); 
} 

、あなたはそれぞれのレンダリング上の画像を必要としないようにrender()方法外datav2を移動する必要があります。

Answer 2

はいあなたが追加する必要は次のように、アレイ内で必要とし、その後render()外datav2変数を入れて、アプリには警告がないので、ビューリターンでkeyする配列マップにindexを追加することを忘れないでくださいこの：私は私のエミュレータ上でそれをしようとすると

const datav2 = [ 
    require("./img/a1.jpg"), 
    require("./img/a6.jpg"), 
]; 

export class ImageList extends React.Component { 
constructor() { 
    super(); 
} 

render() { 

    const lapsList = datav2.map((data,i) => { 
    return (
     <View key={i}> 
      <Image source={testPath} style={{width: 50, height: 50, backgroundColor: "#33ff00"}} /> 
     </View> 
    ) 
    }) 

    return (
    <View> 
     {lapsList} 
    </View> 
    ); 

    } 
} 

そして、これが結果の例である：

私はこの答えはあなたを助けることができると思います:)