Reactjs 在多个堆栈导航器中常见的所有屏幕放在哪里？-反应导航v5

以下是我的应用导航器的层次结构

├── appNavigator（底部选项卡导航器）

• ├── 提要（堆栈导航器）
  • postDetailScreen
  • 页面详细信息屏幕
  • ProfileDetailScreen
  • …其他屏幕
• ├── 通知（堆栈导航器）
  • ProfileDetailScreen
  • 页面详细信息屏幕
  • PostDetailScreen
  • …其他屏幕
• ├── 配置文件（堆栈导航器）
  • ProfileDetailScreen
  • 页面详细信息屏幕
  • PostDetailScreen
  • …其他屏幕

现在的问题是我必须复制所有堆栈中常见的屏幕（ProfileDetail、PostDetail和PageDetail），以便在堆栈中访问它们

对于这个用例有更好的解决方案吗。我应该把公共屏幕放在哪里，以便它们在所有子堆栈中都可用，而不必到处复制它们

这里有一个公开的github问题，我经历了这个问题，但没有找到一个好的解决方案

---

由于您有多个相同的屏幕和一些不同的数据（标题、说明等），因此您只能创建一个具有多个屏幕的通用堆栈导航器，然后您可以从其他任何地方调用它

堆栈导航器可以如下所示：

导出默认类StackNavigator扩展React.Component{
render（）{
const{stackName1，stackComponent1，stackName2，stackComponent2，stackName3，stackComponent3}=this.props；
//控制台日志（“道具”）；
//console.log（stackName1）；
//控制台日志（stackComponent1）；
返回(
)
}
}

然后从任何屏幕（提要、通知、配置文件）按如下方式调用导航器：

另外，如果您想从stack navigator向每个页面发送额外的参数，可以通过我添加到stack navigator每个屏幕中的

initialParams={{key:“value”}

发送这些参数。如果您想从特定屏幕接收此道具，只需通过所述的

this.props.route.params.key

访问该键即可

---

如果堆栈上有更多屏幕，则可以以数组形式传递组件的信息。

请告诉我哪些道具或数据将这些组件彼此分离。那么我可以建议你解决这个问题。