如何在react navigation 5中使用上下文提供程序 Package 多个堆栈屏幕?

pbpqsu0x  于 2023-11-21  发布在  React
关注(0)|答案(2)|浏览(145)

我想实现像下面这样的东西,但这是不可能的,因为堆栈导航器只接受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/>

字符串
我知道我可以通过用堆栈导航器 Package 屏幕来实现这一点,如下所示:

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


有没有更简单的方法,不用定义新的导航器?

wmtdaxz3

wmtdaxz31#

我最终所做的只是在全局范围内定义上下文,然后通过基于使用上下文的钩子中的某些条件抛出错误来限制访问。
例如:

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

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

   return someProperty
}

字符串

mzaanser

mzaanser2#

试试这个,我可能错了

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

字符串

相关问题