我有一个产品列表，需要从该列表导航到每个产品，并显示从 HomeScreen 传递到 DetailsS​​creen 的数据。我正在尝试使用 react-navigation 在屏幕之间导航。

当我导航到 DetailsS​​creen 时，我将下面的 JSON 数据作为状态传递。 找不到正确的解决方案来导航到单击的产品。

我怎样才能将数组中的一个项目传递给下一个屏幕，以便当您打开 DetailsS​​creen 时始终拥有正确的数据？ 或者我可以用索引以某种方式导航到确切的详细信息屏幕吗？

我有一些 JSON 数据：

{ "products" : [{
    "id": "0",
    "imageUrl":
      "https://c.static-nike.com/a/images/t_PDP_1728_v1/f_auto/bfbtp31oaoe1haptpdcz/free-tr-flyknit-3-training-shoe-rJTGVbmL.jpg",
    "title": "Nike Free TR Flyknit 3",
    "price": "60$",
    "userPhone": "041-425-900",
    "userEmail": "[email protected]"
  },
  {
    "id": "1",
    "imageUrl":
      "https://c.static-nike.com/a/images/t_PDP_864_v1/f_auto/dhw4wxp9ebyef1q35f4g/metcon-4-cross-training-weightlifting-shoe-1qTbMObn.jpg",
    "title": "Nike Metcon 4",
    "price": "127$",
    "userPhone": "041-125-400",
    "userEmail": "[email protected]"
  },

  {
    "id": "2",
    "imageUrl":
      "https://c.static-nike.com/a/images/t_PDP_1728_v1/f_auto/xzei8hswzsvdv1xlsd5e/air-max-90-leather-shoe-xqTPGEVE.jpg",
    "title": "Nike Air Max 90 Leather",
    "price": "200$",
    "userPhone": "041-211-320",
    "userEmail": "[email protected]"
    }]
  }

HomeScreen：

class HomeScreen extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      data: data.products,
    };
  }


  _keyExtractor = (item, index) => item.id;

  //Bellow is navigation method and passing JSON as state
  openDetails = () => {
    this.props.navigation.navigate("Details", {
      data: this.state.data,
    });
  };


  renderProduct = ({ item, index }) => {
    console.log('index je', this.state.index);
    return (
      <Item
        itemTitle={item.title}
        openDetails={this.openDetails}
        itemUrl={item.imageUrl}
        data={this.state.data}
      />
    );
  };

  render() {
    return (
      <FlatList
        data={this.state.data}
        renderItem={this.renderProduct}
        keyExtractor={this._keyExtractor}
      />
    );
  }
}

export default HomeScreen;

DetailsS​​creen：

    class DetailsScreen extends React.Component {
  render() {
        const { params } = this.props.navigation.state;

    const data = params ? params.data : null;        

return (
  <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
  <Text>{JSON.stringify(data.title)}</Text>
  </View>
);
  }
}

export default withNavigation(DetailsScreen);