React native 如何基于AsynStorage值动态更改react导航标题样式？

我有一个使用react导航的应用程序，我有一个主题系统，如果用户选择一种特定的颜色，它会将所有屏幕背景更改为所选的颜色。 我也希望对react导航执行同样的操作，例如，如果用户选择绿色，react导航标题背景色也将是绿色

这是我的themeProvider：

const STORAGE_KEY = 'THEME_ID';
const ThemeContext = React.createContext();

export const ThemeContextProvider = ({ children }) => {
  const [themeID, setThemeID] = useState();
  useEffect(() => {
    (async () => {
      const storedThemeID = await AsyncStorage.getItem(STORAGE_KEY);
      if (storedThemeID) setThemeID(storedThemeID);
      else setThemeID(THEMES[1].key);
    })();
  }, []);

  return (
    <ThemeContext.Provider value={{ themeID, setThemeID }}>
      {!!themeID ? children : null}
    </ThemeContext.Provider>
  );
};

export function withTheme(Component) {
  return props => {
    const { themeID, setThemeID } = useContext(ThemeContext);

    const getTheme = themeID => THEMES.find(theme => theme.key === themeID);
    const setTheme = themeID => {
      AsyncStorage.setItem(STORAGE_KEY, themeID);
      setThemeID(themeID);
    };

    return (
      <Component
        {...props}
        themes={THEMES}
        theme={getTheme(themeID)}
        setTheme={setTheme}
      />

    );
  };
}

正如您所看到的，我试图使用backgroundColor作为选定的主题，以用作标题背景色

我尝试包装导航器以使用withTheme钩子，然后导出为

导出默认withTheme（DroperNavigator）

但是它返回找不到变量主题，并在加载应用程序时变成循环

---

有人能告诉我怎么做吗？我对react导航相当陌生。

如果您可以将代码的可运行示例放在某个地方（snack或git），这将非常有用，如果您可以将代码的可运行示例放在某个地方（snack或git），这将非常有用

ArchivedScreen = ({ theme, navigation }) => {
  return (
    <View style={[style.container, { backgroundColor: theme.backgroundColor }]}>
                    <Button title="Open drawer" onPress={() => navigation.openDrawer()} />

    </View>
  );
};



const style = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
  text: {
    fontWeight: 'bold',
  },
});

export default withTheme(ArchivedScreen);

  const drawerNavigator = createDrawerNavigator({

    Home: HomeStack,
    Tasks: {
      screen: TasksStack,
      navigationOptions: {
        drawerLabel: 'Task manager - -'
      }
    },
    Completed: {
      screen: CompletedStack,
      navigationOptions: {
        drawerLabel: 'Completed -'
      }
    },
    Archived: {
      screen: ArchivedStack,
      navigationOptions: {
        drawerLabel: 'Archived -',
      },

    },
    Calendar: CalendarStack,
    Notifications: NotificationStack,
    Settings: SettingsStack,
    Account: AccountStack,
  }); 


  HomeScreen.navigationOptions = {
    title: 'Dashboard',
    headerTintColor: 'white',
    headerStyle: {
      borderBottomWidth: 0,
      backgroundColor: theme.backgroundColor,
    },
  }

  CompletedScreen.navigationOptions = {
    title: 'Completed tasks',
    headerTintColor: 'white',
    headerStyle: {
      borderBottomWidth: 0,
      backgroundColor: theme.backgroundColor,
    }
  }

  TaskScreen.navigationOptions = {
    title: 'Tasks',
    headerTintColor: 'white',
    headerStyle: {
      borderBottomWidth: 0,
      backgroundColor: theme.backgroundColor,
    }
  }

  ArchivedScreen.navigationOptions = {
    title: 'Archived tasks',
    headerTintColor: 'white',
    headerStyle: {
      borderBottomWidth: 0,
      backgroundColor: theme.backgroundColor,
    }
  }

  AccountScreen.navigationOptions = {
    title: 'Account',
    headerTintColor: 'white',
    headerStyle: {
      borderBottomWidth: 0,
      backgroundColor: theme.backgroundColor,
    }
  }

  CalendarScreen.navigationOptions = {
    title: 'Calendar',
    headerTintColor: 'white',
    headerStyle: {
      borderBottomWidth: 0,
      backgroundColor: theme.backgroundColor,
    }
  }

  NotificationScreen.navigationOptions = {
    title: 'Notifications',
    headerTintColor: 'white',
    headerStyle: {
      borderBottomWidth: 0,
      backgroundColor: theme.backgroundColor,
    }
  }

  SettingsScreen.navigationOptions = {
    title: 'Settings',
    headerTintColor: 'white',
    headerStyle: {
      borderBottomWidth: 0,
      backgroundColor: theme.backgroundColor,
    }
  }


export default drawerNavigator;