React native 从嵌套组件屏幕响应本机屏幕刷新

我有一个屏幕，PDP，这个屏幕包含一个组件，TopNews。我希望TopNews onclick重新绘制PDP（它传入PDP用于检索文章的文章ID）。下图显示了流程

我必须在TopNews中支持这一点的代码是

<TouchableOpacity onPress={() => navigation.navigate('Pdp', {articleid: item.id})}>

navigation.navigate（'Pdp'，{articleid:item.id}）}>

---

挑战是TouchableOpacity事件触发器，但页面不会刷新PDP。我不想只刷新PDP，因为我可能会在PDP之外的其他屏幕中包括TopNews组件，在这种情况下，它只是在需要调用的屏幕内部。

有多种方法可以做到这一点

您可以为文章id创建一个状态，并允许

TopNews

设置此状态：

const PDP = () => {
  const [ id, setId ] = React.useState(0);
  return (
    <div>
      <ArticleComponent articleId={id} />
      <TopNews idSetter={setId} />
    </div>
  );
}

const ArticleComponent = ({ articleId }) => {
  return /* something that renders the article by the id */ ;
}

const TopNews = ({ idSetter }) => {
  return (
    <TouchableOpacity
      onPress={() => {
        idSetter(item.id);
        navigation.navigate('Pdp')
      }}>
  );
}

constpdp=（）=>{
const[id，setId]=React.useState（0）；
返回(
。您可以在PDP组件中创建上下文提供程序，并更改任何PDP子组件中的上下文数据。
我找到了答案，而不是使用navigation.navigate，而是使用navigation.push

<TouchableOpacity onPress={() => navigation.push('Pdp', {articleid: item.id})}>

navigation.push（'Pdp'，{articleid:item.id}）}>

这非常有效：）