如何在 React Navigation 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

我最终所做的只是在全局范围内定义上下文，然后根据使用上下文的钩子中的某些条件抛出错误来限制访问。

举个例子：

const useSomeProperty = () => {
   const { someProperty } = useContext(SomeGlobalContext)

   if (!someProperty) throw new Error("This property can not be accessed here")

   return someProperty
}

Answer 2

试试这个，我可能是错的

<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/>