reactnative、react コンポーネントで格納した連想配列をそのまま別のファイルのコンポーネントで表示させたい

Question

Cardで定義した変数dictをそのままAコンポーネントで使用したい

使用したライブラリ

card.js

class Card extends React.Component {
render() {
　　　　　　//省略　dictにはファイル名、パスが連想配列で格納されている
          var show_num = 10   
          var dict = []  
          for(var i=0; i<10; i++) {
            var tmp_name = list[i][1]
            var tmp_path = '' + tmp_name + '.jpg'
            dict.push({name: list[i][1] + '.jpg', image: tmp_path})
            console.log(dict)//dictに格納された連想配列を別のファイルのコンポーネントで使いたい
          }
        });
    }
    return (
　　　//省略
    )
  }
}

export default class App extends React.Component {
  render() {
    return (
　　　　renderCard={cardData => <Card {...cardData} />}　//ここでCardを呼び出す
    )
  }
}

A.js

class A extends React.Component {
  render() {
    //console.log(dict)　ここでdictを呼び出したい
    return (
      <View style={styles.card}>
          //ここでdictに入ったパスを取り出して表示させる
          <Image style={styles.thumbnail} source={{ uri: '' }} />
        </View>
    );
  }
}

export default A;

Comments

[og24715]

A コンポーネントと Card コンポーネントはどういう関係ですか？App と Card が card.js にまとめられているのも気持ち悪いですが

[og24715]

Card#render() 中の list ってどこから出てきたんでしょう？さらには何も return してませんし… App#render() も return おかしいですよ。まともなコードをご提示ください。

[退会済みユーザー]

すいません、使用したライブラリのexampleに書き足してるいるのでcard.jsにまとめてしまっています。

[退会済みユーザー]

Cardのdictに格納された配列　{name:”ファイルネーム”,image: “パス”} を遷移先のAでdictのimageパスを受け取って表示させようとしています

[退会済みユーザー]

長くなるので省略してしまいました。console.log(dict)には１０枚の画像ファイルの名前とパスが配列となっています

[退会済みユーザー]

質問内容がおかしかったかもしれないです。Cardで定義した変数dictをそのままAコンポーネントで使用したい。とするべきでしたか。申し訳ございません。

[og24715]

Card と A の関係がよくわかりませんが親子なら props として dict を渡せば良いんじゃないですかね https://reactjs.org/docs/components-and-props.html

Answer 1

長くなるので省略してしまいました。console.log(dict)には１０枚の画像ファイルの名前とパスが配列となっています

察してます。 dict って変数名が謎ですが。
react-native-tinder-swipe-cards のコード中じゃ cards と命名してます。
ただの配列なので辞書でもないですよね。

Cardのdictに格納された配列　{name:”ファイルネーム”,image: “パス”} を遷移先のAでdictのimageパスを受け取って表示させようとしています

遷移先？ react-native-router-flux とか使っているんですか？
A と Card の関係を明確にしてください。
ご提示のコードには A コンポーネントは使われてないように見えます。

サンプルコードをちゃんと見直すべきだと思いますね。答えはそこに書いてあるので。
それか質問の内容を充実させてください。

// app.js
import React from 'react';
import { Text, View, Image } from 'react-native';
import SwipeCards from 'react-native-swipe-cards';

import Card from './card';

const dict = [
  { name: '<YOUR_FILE_NAME>', image: '<YOUR_FILE_PATH>' },
  { name: '<YOUR_FILE_NAME>', image: '<YOUR_FILE_PATH>' },
];

export default () => (
  <SwipeCards
    cards={cards}
    renderCard={cardData => <Card {...cardData} />}
  />
);

// card.js
const Card = props => (
  <View>
    <Image source={{ uri: props.cardData.image }} />
    <Text>
      {props.cardData.name}
    </Text>
  </View>
);

export default Card;