如何在反应导航 5 中使用上下文提供程序包装多个堆栈屏幕？

Question

我想实现以下目标，但这是不可能的，因为堆栈导航器仅接受 Stack.Screens 作为子项。

<Stack.Navigator>
  <Provider1>
    <Stack.Screen name="screen1" component={Screen1} />
    <Stack.Screen name="screen2" component={Screen2} />
  </Provider1>
  <Provider2>
    <Stack.Screen name="screen3" component={Screen3} />
    <Stack.Screen name="screen4" component={Screen4} />
  </Provider2>
</Stack.Navigator/>

我知道我可以通过像这样用堆栈导航器包裹屏幕来实现这一点：

const stackNav1 = <Provider1>
 <Stack.Navigator>
    <Stack.Screen name="screen1" component={Screen1} />
    <Stack.Screen name="screen2" component={Screen2} />
 </Stack.Navigator>
</Provider1> 


const stackNav2 = <Provider2>
 <Stack.Navigator>
    <Stack.Screen name="screen3" component={Screen3} />
    <Stack.Screen name="screen4" component={Screen4} />
 </Stack.Navigator>
</Provider2> 
...

<Stack.Navigator>
    <Stack.Screen name="stack1" component={stackNav1} />
    <Stack.Screen name="stack2" component={stackNav2} />
</Stack.Navigator/>

是否有任何更简单的方法可以让我不必定义新的导航器？

Answer 1

试试这个，我可能错了

<Stack.Navigator>
  <Provider1>
   <Stack.Group>
    <Stack.Screen name="screen1" component={Screen1} />
    <Stack.Screen name="screen2" component={Screen2} />
   </Stack.Group>
  </Provider1>
  <Provider2>
   <Stack.Group>
    <Stack.Screen name="screen3" component={Screen3} />
    <Stack.Screen name="screen4" component={Screen4} />
   </Stack.Group>
  </Provider2>
</Stack.Navigator/>