Javascript 如何使用抽屉屏幕及其子屏幕组件的上下文

Issue:我有一个围绕我的整个应用程序的上下文，但我需要一个额外的上下文，用于单个抽屉屏幕及其子屏幕和组件.

DataProvider是整个应用程序使用的.

我已经创建了一个仅供抽屉导航器中的‘Component’A即屏幕A及其在Stack Navigator中的子屏幕(A子屏幕)使用的上下文.

到目前为止，已经完成了哪些工作:

阅读了文档并使用两个上下文包装了整个应用程序，但考虑到只有部分抽屉导航器和屏幕实际需要AContext，我只需要包装只需要它的屏幕/组件，以防止不必要的重新呈现屏幕和最初不需要上下文的组件.

在这种情况下，有没有什么建议，或者可以忽略不计？

下面是我的App.js代码:

const DrawerNavigator = () => {
  
  return (
    <Drawer.Navigator
      initialRouteName=
      screenOptions={({ navigation }) => ({
        headerTitle: "",
      }
      )}
    >
      <Drawer.Screen
        name="A"
        component={A}
        options={{
          // freezeOnBlur: true,
        }}
      />
      <Drawer.Screen
        name="B"
        component={B}
        options={{
          freezeOnBlur: true,
        }}
      />
      <Drawer.Screen
        name="C"
        component={C}
        options={{
          freezeOnBlur: true,
        }}
      />
    </Drawer.Navigator>
  )
};

export default function App() {
  return (
    <>
      <DataProvider>
        <AProvider>
          <NavigationContainer>
            <Stack.Navigator
              screenOptions={({ navigation }) => ({
                headerTitle: "",
              })}
            >
              <Stack.Screen
                name="HOME"
                component={DrawerNavigator}
                options={{ headerShown: false }}
              />
              <Stack.Screen
                name="ASubScreen"
                component={ASubScreen}
                options={{
              />
              <Stack.Screen
                name="D"
                component={D}
                options={{ headerTitle: "" }}
              />
              <Stack.Screen
                name="E"
                component={E}
                options={{ headerTitle: "" }}
              />Ï
            </Stack.Navigator>
          </NavigationContainer>
          <ConsentModal />
        </AProvider>
      </DataProvider>
      <StatusBar style="dark" />
      <Toast />
    </>
  );
}

以下是上下文代码:

import React, { useEffect, useState } from "react";

export const AContext = React.createContext();

export const PayEProvider = ({ children }) => {
  const [currentUser, setCurrentUser] = useState(null);

  return (
    <AContext.Provider
      value={{
        currentUser,
        setCurrentUser
      }}
    >
      {children}
    </AContext.Provider>
  );
};