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

pbpqsu0x 于 6个月前发布在 React

关注(0)|答案(2)|浏览(65)

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

型
有没有更简单的方法，不用定义新的导航器？

react-native

来源：https://stackoverflow.com/questions/65629534/how-to-wrap-multiple-stack-screens-with-context-provider-in-react-navigation-5

2条答案

按热度按时间

wmtdaxz31#

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

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

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

   return someProperty
}

字符串

赞(0）回复(0）举报 6个月前

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

字符串

赞(0）回复(0）举报 6个月前

我来回答

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

2条答案

相关问题

热门标签

最新问答