React native 导航到FlatList中的每个项目

我有一个产品列表，需要导航到该列表中的每个产品，并显示从主屏幕do Details屏幕传递的数据。我正在尝试使用react导航在屏幕之间导航

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

如何将数组的一个项目传递到下一个屏幕，以便在打开DetailsScreen时始终拥有正确的数据？ 或者我可以用索引导航到详细信息屏幕吗

我有一些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": "adam@gmail.com"
  },
  {
    "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": "davids@gmail.com"
  },

  {
    "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": "ragnar@gmail.com"
    }]
  }

主屏幕：

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;

类主屏幕扩展React.Component{
建造师（道具）{
超级（道具）；
此.state={
数据：data.products，
};
}
_keyExtractor=（项，索引）=>item.id；
//下面是导航方法，并将JSON作为状态传递
openDetails=（）=>{
this.props.navigation.navigate（“详细信息”{
数据：this.state.data，
});
};
renderProduct=（{item，index}）=>{
log（'index je'，this.state.index）；
返回(
);
};
render（）{
返回(
);
}
}
导出默认主屏幕；

详细屏幕：

    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);

class DetailsScreen扩展了React.Component{
render（）{
const{params}=this.props.navigation.state；
常量数据=参数？参数数据：空；
返回(
{JSON.stringify（data.title）}
);
}
}
使用导航导出默认值（DetailsScreen）；

假设您的数据是在导航和组件连接时传递的，并且您的项目组件是您的详细信息屏幕，因此您可以执行以下操作

openDetails = (data) => {
    this.props.navigation.navigate("Details", { 
      data  <== // ... pass the item data here
    });
  };

      <Item
        itemTitle={item.title}
        openDetails={() => this.openDetails(item)} // Get the item data by referencing as a new function to it
        itemUrl={item.imageUrl}
        data={this.state.data}
      />

---

当你发布该解决方案时，我正在考虑该解决方案。谢谢！

<TouchableOpacity onPress={this.props.openDetails} style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}> //... Bind the openDetails function to the prop here
   <Text>{JSON.stringify(this.props.itemTitle)}</Text> //...<== Access the other props here
</TouchableOpacity>