はURIが

Question

動作しないネイティブイメージを反応させるの私は、ローカルファイルから画像を表示しようとしたので、私はこの

<Image 
    source={{uri:'../../assets/img_src/BTI.jpg'}} 
    style={{height:150,width:150}} 
/> 

私のコンテナコンポーネントは、高さと幅を取得しているようだが、画像は」doesnのことをしようtロード。だから私はそれは、残念ながら私の知る限り、私は最初のアドレスファイルを操作し、それを変数に格納したい場合、私はこの実装を使用することはできません知っているように、本当によく働くこの

<Image 
    source={require('../../assets/img_src/BTI.jpg')} 
    style={{height:150,width:150}} 
/> 

を試してみてください。 例：

const imgSrc = `../../assets/${data.image}`; 

data.imageは= 'img_src/BTI.jpg'。 アンドロイドスタジオでアンドロイドシミュレータのすべてのデータを削除しようとしましたが、結果は同じです。私は何か間違っているのですか？これに対してより良い実装がありますか？

どうもありがとう:)

Answer 1

は動的パスrequire()ことができないが反応ネイティブの意図した動作で、パッケージャは、事前にパスを知っている必要があります - React Native issues

を参照してください私たちは、この問題を抱えていましたプロジェクトでは、イメージURLをDBに保存していて、ローカルに保存されたイメージへのパスを取得するためにアプリケーション内の文字列を連結したいと考えました。発見したように、これは機能しません。私たちの回避策が役に立つかもしれません。

は、私たちの/imagesフォルダでは、我々はそう

今

export const Images = { 
    image1: require('./image1.png'), 
    image2: require('./image2.png'), 
    image3: require('./image3.png'), 
    }; 

パッケージャは、事前にすべてのパスを知っていたし、幸せだったように、単純にすべての私達のローカルの画像パスにキーマッピングされたオブジェクトをエクスポートし、新しいimages.jsファイルを作成しました。次に、imageKeyをDB項目に追加し、絶対パスではなく、これを使用しました。単純に画像を取得するには

import { Images } from '../images/images'; 
// get your image key e.g. passed down through props 
const img = Images[imageKey]; 

... 
render() { 
    ... 
    <Image source={img} /> 
    ... 
} 

正確なユースケースには適していない可能性がありますが、うまくいけばそれを使いこなせるかもしれません。