如何将 storeId 绑定到 React-Native 中的 onPress 事件？

Question

我希望能够在用户按下特定商店名称时呈现有关该特定商店的更多详细信息。现在，我只渲染商店名称，使用 map() 我通过导入包含所有相关数据的配置文件获取所有信息。配置文件是一个 JSON 文件。每个商店都有一个 id、openingTime、closingTime、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;

我希望能够在商店上按下以呈现有关该商店的附加信息（营业时间、位置等）。

我查看了几个不同的问题 and this one 。第二个 link 的回答说传递点击事件，我试过了，但我不确定它是如何工作的，即使我能够传递道具并在内部访问它们商店详情。我知道，一旦我将 storeId（或 branchName）link 编辑到 onPress 事件，我就能够呈现附加信息，但我不确定该怎么做。

Answer 1

向状态添加一个布尔变量，例如

this.setState({isDetailVisible: false});  // set it in the constructor

在按钮事件处理程序中更新此状态，例如onPress():

this.setState({isDetailVisible: true});

在 StoreDetail 的渲染函数中

<View>
    <Card>
        <CardSection>
            <Text>{branchName}</Text>
        </CardSection>
    </Card>
    {this.state.isDetailVisible && renderDetails(); } //<-- try this
</View>

此处将您的 JSX 详细信息放在函数 renderDetails 中：

renderDetails() {
return (
        <View>
            <Text>{someDetailInfo}</Text>
        </View>
    );
}

如何将 storeId 绑定到 React-Native 中的 onPress 事件？

How do I bind the storeId to an onPress event in React-Native?

react-native

binding

react-props

onpress