我有实现@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;```