web-dev-qa-db-ja.com

React-NativeNativeBaseでローカル画像を表示する

次のような画像を表示すると機能します。

<Thumbnail source= {require('../images/01.jpg')} />

しかし失敗する：

<Thumbnail source= {require('../images/'+ {person.id} +'.jpg')} />

person.idはpeopleの配列から取得されます。 <Text>{person.id}</Text>で印刷すると、出力は01または02になります。

名前をprop.valueとしてローカル画像を表示するにはどうすればよいですか？

私は試した：

<Thumbnail source= {require(`../images/${person.id}.jpg`)} />

そして

<Thumbnail source= {require('../images/'+ person.id +'.jpg')} />

両方ともエラーで失敗します：名前のない名前付きモジュール： '../ images/1.jpg' enter image description here

reactjsreact-nativenative-base
7
Somename

あなたが達成しようとしていることは実際には不可能です。

パッケージ化は1回行われます実行前したがって、変数person.idまだ価値がありません。

これはすでに議論されています ここ 。

ディスカッションでは、この問題の解決策を見ることができます。

基本的には可能なすべてのファイルをインポートする使用する必要があります。

簡単なアプローチ：

var firstImage = require('../images/01.jpg');
var secondImage =  require('../images/02.jpg');  
var myComponent = (whichImageToUse) ? firstComponent : secondComponent;

洗練されたアプローチ：すべての画像を必要とするファイルを作成します。

allImages.js

export default {
    '01': require('../images/01.jpg'),
    '02': require('../images/02.jpg'),
    // import all other images
}

画像を使用する必要がある場所にそのファイルをインポートし、次のように個々の画像にアクセスします。

import images from '../images/allImages'
<Thumbnail source={images[person.id]} />
12
Patrik Prevuznak

NativeBaseサムネイルのコンポーネントの置き換えはReact-Nativeのイメージです。

NativeBaseサムネイルではなくReact Native Imageでこれを達成する場合、それはNativeBaseの問題です。

この問題は、React Nativeの問題ですでに説明されています

＃2481 、 ＃6391 、 ＃1029

1
Supriya Kalghatgi

Person.idから中括弧を削除すると機能します。

<Thumbnail source= {require('../images/'+ {person.id} +'.jpg')} />

このような：

<Thumbnail source= {require('../images/'+ person.id +'.jpg')} />

またはこれ（es6テンプレートリテラルを使用）：

<Thumbnail source= {require(`../images/${person.id}.jpg`)} />
1
Cesar William