0

我有实现@react-navigation/bottom-tabs 所有选项卡都包含平面列表中的数据,并且有一个设置选项可以在暗/亮模式下切换主题。通过使用 Context API 进行主题切换,但我面临主题切换需要时间来切换和 UI 更改需要时间(2-3 秒)来更改主题的问题。但是当我在 bottomTabs 选项中使用 unMountonBlur 为 true 时,它​​的工作正常如何在没有 unmountonblur 的情况下修复?

主题背景:

  theme: DAY_THEME,
  toggleTheme: (theme: string) => {},
});
const ThemeContext = (props: any) => {
  const [theme, setTheme] = useState(DAY_THEME);
  const checkForTheme = async () => {
    try {
      const value = await AsyncStorage.getItem(
        CONSTANT.AsyncStorageKey.ThemeSelected,
      );
      if (value != null && value != undefined) {
        if (value === 'day') setTheme(DAY_THEME);
        else setTheme(NIGHT_THEME);
      } else setTheme(DAY_THEME);
    } catch (error) {
      setTheme(DAY_THEME);
    }
  };

  const toggleTheme = async (theme: string) => {
    if (theme === 'day') {
      setTheme(DAY_THEME);
      await AsyncStorage.setItem(CONSTANT.AsyncStorageKey.ThemeSelected, 'day');
    } else {
      setTheme(NIGHT_THEME);
      await AsyncStorage.setItem(
        CONSTANT.AsyncStorageKey.ThemeSelected,
        'night',
      );
    }
  };
  useLayoutEffect(() => {
    checkForTheme();
  }, []);

  return (
    <Theme.Provider
      value={{
        theme: theme,
        toggleTheme: toggleTheme,
      }}>
      {props.children}
    </Theme.Provider>
  );
};
export default ThemeContext;```


4

0 回答 0