2

私はネイティブに反応するのが初めてで、反応画像コンポーネントにいくつかの問題があります。ドキュメントを読み、スタック オーバーフローに関するいくつかの記事と質問を検索しました。イメージ コンポーネントの src は文字列 (ローカルまたは URL からのパス) を取るか、require を境界として文字列と共に使用してイメージをロードできるという考えが浮かびました。私が取り組んでいるプロジェクトには 50 を超える画像があり、レンダリングする画像は実行時に決定されます。以前は、必要な境界として変数を使用して画像を動的に読み込むことを計画していましたが、調査の結果、それは不可能であることがわかり、react native はそのような機能を提供する予定はありません。

require を値として含むオブジェクトを作成するというアイデアを思いつきました。

export const subCategories = {
  'protection':[
     [
      {
        imageUrl: require('../imag`enter code here`es/trees.png'),
        title: 'Protection',
        value: 'p_1'
      },
      {
        imageUrl: require('../images/eco-tag.png'),
        title: "From Enemy",
        value: 'p_2'

      },
      {...

   'daily':[
     [
      {
        imageUrl: require('../images/trees.png'),
        title: 'Morning',
        value: 'd_1'
      },
      {
        imageUrl: require('../images/eco-tag.png'),
        title: "Evening",
        value: 'd_2'

      },
      {...

そして、コンポーネントに渡されたナビゲーション境界に基づいて、選択するオブジェクトを決定します。

this.state = {
            data: subCategories[this.props.navigation.state.params.value]
    ...

そして、私はこれで成功しました。しかし、完全な知識がなく、このステートメントがどのように動作するのかわからないため、アプリケーションのパフォーマンスに懸念があります。

imageUrl: require('../images/eco-tag.png')

すべての画像をメモリにロードし、Image コンポーネントのソースに割り当てられたものをレンダリングしますか。または、レンダリング時にイメージをロードしますか?

<Image source={ this.props.imageUrl } style = { styles.image }  />

これを自分で説明する場合は、そうしてください。また、優れた記事をお持ちの場合や、ドキュメントの一部を見逃している場合も同様です。私をそれにリダイレクトしてください。

PS: データを JS ファイルにエクスポートし、画面にリダイレクトされたときにインポートしています。これが正しい方法かどうかも知りたいです。

4

1 に答える 1