小编Ade*_*-SJ的帖子

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

应用程序.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仅使用上下文/提供者包装一些屏幕？