web-dev-qa-db-ja.com

React Native：require（）with Dynamic String？

私は、人々がReact Nativeおよびrequire()関数で抱えている問題に関するいくつかの投稿を読みました。

動的（失敗）：

urlName = "sampleData.json";
data = require('../' + urlName);

vs.静的（成功）：

data = require('../sampleData.json');

一部のスレッドでは、これはReact Nativeのバグであり、他の機能ではこれが機能であることをバグとしています。

関数内に動的リソースを必要とする新しい方法はありますか？

関連投稿（React時間）でかなり古い:)

javascriptreactjsreact-nativeecmascript-6require
22
Jake Chasan

私が聞いたように、reactのrequire()は変数ではなく静的URLのみを使用します。つまり、require('/path/file')を実行する必要があります。これを見てください githubの問題 =および この1つ より多くの代替ソリューションについては、他にもいくつかの方法があります！例えば

const images = {
profile: {
    profile: require('./profile/profile.png'),
    comments: require('./profile/comments.png'),
},
   image1: require('./image1.jpg'),
   image2: require('./image2.jpg'),
};

export default images;

それから

import Images from './img/index';

render() {
    <Image source={Images.profile.comments} />
}

これから answer

9
klendi

これが私の解決策です。

セットアップ

ファイル構造：

app  
  |--src
    |--assets
      |--images
        |--logos
          |--small_kl_logo.png
          |--small_a1_logo.png
          |--small_kc_logo.png
          |--small_nv_logo.png
          |--small_other_logo.png

        |--index.js
    |--SearchableList.js

index.jsには、これがあります：

const images = {
  logos: {
    kl: require('./logos/small_kl_logo.png'),
    a1: require('./logos/small_a1_logo.png'),
    kc: require('./logos/small_kc_logo.png'),
    nv: require('./logos/small_nv_logo.png'),
    other: require('./logos/small_other_logo.png'),
  }
};

export default images;

SearchableList.jsコンポーネントで、次のようにImagesコンポーネントをインポートしました。

import Images from './assets/images';

次に、コンポーネントに新しい関数imageSelectを作成しました。

imageSelect = network => {
  if (network === null) {
    return Images.logos.other;
  }

  const networkArray = {
    'KL': Images.logos.kl,
    'A1': Images.logos.a1,
    'KC': Images.logos.kc,
    'NV': Images.logos.nv,
    'Other': Images.logos.other,
  };

  return networkArray[network];
};

次に、コンポーネントのrender関数で、この新しいimageSelect関数を呼び出して、this.state.networkの値に基づいて目的の画像を動的に割り当てます。

render() {
  <Image source={this.imageSelect(this.state.network)} />
}

ImageSelect関数に渡される値は、任意の動的な文字列にすることができます。最初に状態に設定してから渡すことにしました。

この答えがお役に立てば幸いです。 :)

3
Ryan S

ドキュメントを読んで、私は実用的な答えを見つけました、そして動的イメージを使用することができます、彼らはここでネットワークイメージと呼ぶドキュメントで

https://facebook.github.io/react-native/docs/images#network-images

これが他のファイルタイプに適用できるかどうかはわかりませんが、リストにあるように、非画像タイプで必要です

Uri：呼び出しを使用する必要があります

data = {uri: urlName}

私はこれで動的に動作する画像を得ました

<Image source={{uri: image}} />
0
DaveClissold

ローカルに保存された複数の画像を切り替える必要がある場合は、次の方法も使用できます。

_        var titleImg;
        var textColor;
        switch (this.props.data.title) {
        case 'Футбол':
            titleImg = require('../res/soccer.png');
            textColor = '#76a963';
            break;
        case 'Баскетбол':
            titleImg = require('../res/basketball.png');
            textColor = '#d47b19';
            break;
        case 'Хоккей':
            titleImg = require('../res/hockey.png');
            textColor = '#3381d0';
            break;
        case 'Теннис':
            titleImg = require('../res/tennis.png');
            textColor = '#d6b031';
            break;
        }
_

このスニペットでは、小道具に応じて変数titleImgおよびtextColorを変更します。このスニペットをrender()メソッドに直接配置しました。

0
Daniel Chernyshev

Webpackのようなモジュールバンドラーを使用していますか？

その場合は、require.ensure()を試すことができます

参照： https://webpack.js.org/guides/code-splitting/#dynamic-imports

0
kngroo