时间戳

首页 > 解决方案 > 显示所选数据

react-native - 显示所选数据

问题描述

我有一个通过显示特定数据的 JSON 文件循环的项目列表。选择一个列表项时，我希望将用户带到另一个页面，并显示有关所选项目的更多信息。

这是我下面的代码，我对 JS 和 React-Native 也很陌生。

          {
      data.stores.map(store => (
        <Card button onPress={() => this.props.navigation}>
          <CardItem header>
            <Text>{store.storeId} - {store.storeName}</Text>
            <Right>
              <Icon name="arrow-forward" />
            </Right>
          </CardItem>
        </Card>
      ))
      }

我的 JSON 文件可能如下所示：

 stores: [
{
storeId: 2,
storeName: "Blah",
phone: "0404040404",
Status: "Retail Partner",
Manager: "Blah",
},

标签： react-nativenative-base

解决方案

我认为您使用react-navigation进行导航。你可以按照例子

https://reactnavigation.org/docs/en/params.html

这是解决方案

{
  data.stores.map(store => (
    <Card button onPress={() => this.props.navigation.navigate( "routeName",{data : store })}>
      <CardItem header>
        <Text>{store.storeId} - {store.storeName}</Text>
        <Right>
          <Icon name="arrow-forward" />
        </Right>
      </CardItem>
    </Card>
  ))
  }

在下一页中，您将在

this.props.navigation.state.params

推荐阅读