ユーザーが特定の店舗名を押したときに、特定の店舗に関する詳細をレンダリングできるようにしたいと考えています。現在、ストア名のみをレンダリングしています。 map() を使用して、すべての関連データを含む構成ファイルをインポートすることですべての情報を取得しています。構成ファイルは JSON ファイルです。各店舗には、id、openingTime、cloningTime、address、および branchName があります。
私の StoreList ファイルは次のようになります。
import React, { Component } from 'react'
import { View } from 'react-native'
import Config from '../Config';
import StoreDetail from './StoreDetail';
class StoreList extends Component {
constructor() {
super();
this.state = {
costcoStoreList: []
}
}
componentWillMount() {
const obj = Config;
obj.costcoThree = Object.values(obj.costcoThree)
console.log(typeof(obj.costcoThree));
this.setState({
costcoStoreList: obj.costcoThree
})
}
renderStores() {
return this.state.costcoStoreList.map(store =>
<StoreDetail key={store.id}
store={store}
press={this.press}
/>);
}
render() {
return (
<View>
{this.renderStores()}
</View>
);
}
}
export default StoreList;
StoreDetail ファイル内で、branchName だけをレンダリングします。
import React, { Component } from 'react';
import { Text, TouchableWithoutFeedback, View } from 'react-native';
import { Card } from '../common';
import { CardSection }from '../common/';
import { Button } from '../common';
class StoreDetail extends Component {
render() {
const {branchName} = this.props.store;
return (
<TouchableWithoutFeedback
onPress={() => console.log('you pressed this ' )}
>
<View>
<Card>
<CardSection>
<Text>{branchName}</Text>
</CardSection>
</Card>
</View>
</TouchableWithoutFeedback>
);
}
};
export default StoreDetail;
店舗を押して、その店舗に関する追加情報 (店舗の営業時間、場所など) をレンダリングできるようにしたいと考えています。
私はいくつかの異なる質問1とこれ2を見てきました。2番目のリンクの答えは、私が試したクリックイベントを渡すように言っていますが、小道具を渡してStoreDetail内でアクセスできても、それがどのように機能するかわかりません。storeId(または branchName) を onPress イベントにリンクすると、追加情報を表示できるようになることはわかっていますが、その方法がわかりません。