如何在 React/React-Native 的 React-navigation 中包装几个屏幕和上下文？

Question

我有以下结构（有替代名称，仅举例来说，文件很大并且有许多无法统一的上下文）：

应用程序.js

export default function App() {
  return (
    <NavigationContainer>
      <StatusBar
        translucent
      />
      <WarningProvider>
        <Screen2Context>
          <Screen3Context>
            <Routes />
          </Screen3Context>
        </Screen2Context>
      </WarningProvider>
    </NavigationContainer>
  );
}

AppRoutes.js：

export default function Routes() {
  return (
      <Stack.Navigator
        initialRouteName={'Screen1'}
        screenOptions={{
          headerShown: false,
        }}>

      <Stack.Screen name="Screen1" component={Screen1} />
      <Stack.Screen name="Screen2" component={Screen2} />
      <Stack.Screen name="Screen3" component={Screen3} />

     </Stack.Navigator>
    );
}

但这样所有的屏幕都可以访问上下文，并且由于我需要某些屏幕的更具体的上下文，我不希望所有屏幕都可以访问这些上下文，并且还可以避免污染 App.js （或其他任何其他输入文件）比路由），但是当尝试使用提供者包装路由时会生成错误：

Error: A navigator can only contain 'Screen' components as its direct children.

所以问题是：如何使用react-navigation仅使用上下文/提供者包装一些屏幕？

Answer 1

诀窍是将您的包装组件作为componentprop 传递到您的<Stack.Screen/>. 在我的项目中，我采用了下面的方法。

根导航通常如下所示：

<NavigationContainer>
     <Stack.Navigator>
        //...other screens

        <Stack.Screen name="WithContext" component={WrappedStackNavigator}/>

        //...other screens
     </Stack.Navigator>
</NavigationContainer>

最后，这是我们的WrappedStackNavigator：

export default function WrappedStackNavigator() {
    return (
        <ContextProvider>
            <Stack.Navigator>
                <Stack.Group>

                    //... place here your screens to provide them with context

                </Stack.Group>
            </Stack.Navigator>
        </ContextProvider>
    );
}