Tengo la siguiente estructura (con nombres alternativos, solo por ejemplo, el archivo es bastante grande y con muchos contextos que no se pueden unificar):

Aplicación.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> ); }

Pero de esa manera todas las pantallas tienen acceso al contexto, y como necesito contextos más específicos para algunas pantallas, no me gustaría que todas tuvieran acceso a esos contextos, y también para evitar contaminar App.js (o cualquier otro archivo de entrada que no sea que las rutas), pero al intentar envolver las rutas con un proveedor genera el error:

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

Entonces, la pregunta es: ¿Cómo envolver solo algunas pantallas con un contexto/proveedor usando react-navigation?