Javascript 如何在React导航中重用易于阅读和维护的屏幕？

我的目标是将React导航中的

navigate（）

方法标准化为一种实践，该方法可读且可维护

我目前的做法是，如果使用两个不同的可重用组件作为屏幕，那么很难阅读和维护，并且这些可重用组件必须决定下一步的导航位置。

主屏幕->

导航到带参数A的可重用组件A或带参数B的可重用组件A

->

导航到带参数A的可重用组件B或带参数B的可重用组件B？

屏幕->

导航到带元素摘要的城际摘要

/

屏幕

我目前的做法易于阅读和维护：

主页->可重用组件A->具有已定义的

NextRoute

这就是我们如何使用GoJek的UI来实现的。存储库：

我目前的做法是利用params、

导航（'route'，{…params}）

重新使用

屏幕

这个想法很简单，但很难维护
，因为如果更改一个组件，很可能必须更改依赖它的所有组件。
：

如果导航到屏幕是一个可重用的组件，并且有多条路径可供选择，则params
navigate to
决定屏幕下一步应该去哪里，params
nextRoute
决定屏幕下一步应该去哪里

如果params
navigateTo
未定义，则传递的params
nextRoute
是下一屏幕的
navigateTo
可重用组件可以有自己的
navigateTo
和
nextRoute
状态和其他状态作为
navigate（）
方法的参数传递
App.js

<Stack.Screen name="DestinationScreen" component={ReuseableComponent} />
<Stack.Screen name="PickUpScreen" component={ReuseableComponent} />
<Stack.Screen name="WithInCitySummary" component={WithinCitySummary} />
<Stack.Screen name="InterCitySummary" component={InterCitySummary} />



ReuseableComponent.js

export default function ReuseableComponent({
  route: { params },
  navigation: { navigate },
}) {
  const { navigateTo, nextRoute } = params; 

  return (
    <TouchableOpacity 
      onPress={() =>
        navigate(navigateTo, { 
          navigateTo: navigateTo ? navigateTo : nextRoute,
          nextRoute: nextRoute 
        })
      }
    >
      <Text>Next</Text>
    </TouchableOpacity>
  )
}

导出默认函数可重用组件({
路由：{params}，
导航：{navigate}，
}) {
const{navigateTo，nextRoute}=params；
返回(
导航（导航到，{
导航到：导航到？导航到：下一个，
nextRoute:nextRoute
})
}
>
下一个
)
}

您编写可读且可维护的React导航的做法是什么？
这可能会导致基于意见的答案，而不是基于事实的答案，这正是本文的目的所在。如果您的代码有任何问题或错误，请澄清。@SaachiTech我开始在编写代码时搜索一组实践，因为我认为调试和bug修复是我的工作职责，要求修复bug并不会给我自己增加价值。你有什么建议我可以问这类问题吗？我知道这类问题可能会导致基于意见的答案，但同时这项功能没有内置功能，我看到的每个解决方案都涉及从NPM包复制大量内部代码，因此，我认为要求一个可行的模式是合理的，而且是针对主题的。这可能导致基于观点的答案，而不是基于事实的答案，这正是这样做的目的。如果您的代码有任何问题或错误，请澄清。@SaachiTech我开始在编写代码时搜索一组实践，因为我认为调试和bug修复是我的工作职责，要求修复bug并不会给我自己增加价值。你有什么建议我可以问这类问题吗？我知道这类问题可能会导致基于意见的答案，但同时这项功能没有内置功能，我看到的每个解决方案都涉及从NPM包复制大量内部代码，因此，我认为要求一个可行的模式是合理的，而且符合主题。