当用户点击 header 的 navigation.goback 时如何重置所有路由参数？

Question

在进入params issue之前，我想先解释一下我的情况。

我得到了 productlist 页和 productdetails 页。

当我想从 productlist 导航到 productdetails A 时，我使用 navigation.navigate。

navigation.navigate('CaseDetails', {
                screen: 'CaseDetails',
                params: {
                    title: info.title,
                    summary: info.summary,
                },
            })

当我从 productdetails A 到 productdetails B 我使用 navigation.push

navigation.push('CaseDetails', {
            screen: 'CaseDetails',
            params: {
                title: item.title,
                summary: item.summary,
            },
        });

在我的案例详细信息页面中，我得到了 2 组参数数据。

当我从productlist变成productdetails A

参数位于route.params

当我从 productdetails A 到 productdetails B

参数位于route.params.params

所以为了显示正确的数据，我通过创建这样的条件来显示数据

{route.params?.params?.title === undefined
        ? renderPageView(route.params)
        : renderPageView(route.params?.params)}

这里是 renderPageView 函数

const renderPageView = (item) => {
    return (
      <View>
        <View style={globalStyle.articleLandingContainer}>
          <View style={globalStyle.articleLandingOverlay}></View>
          <Text style={styles.landingText}>{item.title}</Text>
          <Text style={styles.landingPara}>{item.summary}</Text>
        </View>
        </View>
      </View>
    );
  };

所以最初的绕圈是页面就可以了。但是在绕的第2圈

从productlist到productdetails A时route.params?.params?.title仍然存在

所以该应用向我显示了来自 productdetails B 而不是 productdetails A 的数据。

所以在我的 drawerNavigator 中。我尝试像这样重置参数，但它什么也没做

clearParams = () => {
     navigation.setParams({
       title: undefined,
       summary: undefined,
     });
  };

<Icon.Button
         name="arrow-left"
         size={25}
         backgroundColor={headerColor}
         onPress={() => {
          navigation.goBack(), clearParams();
 }}></Icon.Button>

我应该怎么做才能让它发挥作用

Answer 1

我不知道其他情况，但这个语法解决了我的问题。

navigation.navigate('CaseDetails', {
            screen: 'CaseDetails',
                        params: {
                            title: info.title,
                            summary: info.summary,
                            params: {
                                title: undefined,
                                summary: undefined,
                            },
                        },
                    }

在 casedetails 组件内部，当在两个细节之间进行通信时

navigation.push('CaseDetails', {
            screen: 'CaseDetails',
            params: {
                title: item.title,
                summary: item.summary,
            },
        });

当用户点击 header 的 navigation.goback 时如何重置所有路由参数？

How to reset all the route params when user click navigation.goback from header?

reactjs

react-native

react-navigation