从嵌套组件屏幕反应本机屏幕刷新

Question

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

我在TopNews中支持此功能的代码是;

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

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

Answer 1

要做的事情不止一种。

您可以为商品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')
      }}>
  );
}

另一种更优雅的方法是使用react contexts。您可以在PDP组件中创建上下文提供者，并在任何PDP的子组件中更改上下文数据。

Answer 2

我找到了答案，而不是使用navigation.navigate，而是使用navigation.push;

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

这很完美：）