Блог

У меня есть следующая структура (с альтернативными именами, например, файл довольно большой и со многими контекстами, которые невозможно объединить):

App.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-навигацию ?