javascript - 如何将东西存储在异步存储中?
问题描述
我在设置异步存储时遇到了一些问题。例如:如果用户已切换到暗模式,当用户再次启动应用程序时,仍应启用暗模式。
我也不确定这是否是正确的做法。
任何帮助表示赞赏。------------------------------ ----------------------------------
切换.js
import * as React from "react";
import { Switch } from "react-native";
import { useTheme } from "../Data/ThemeContext";
import AsyncStorage from "@react-native-async-storage/async-storage";
export const Toggle = () => {
const { colors, setScheme, isDark } = useTheme();
const toggleScheme = () => {
isDark ? setScheme("light") : setScheme("dark");
setScheme(isDark);
storeSetScheme(isDark);
};
React.useEffect(() => {
restoreDarkModeAsync();
}, []);
const asyncStorageKey = "@key";
const storeSetScheme = (isDark) => {
const stringifiedIsDark = JSON.stringify(isDark);
AsyncStorage.setItem(asyncStorageKey, stringifiedIsDark).catch((err) => {
console.log(err);
});
};
const restoreDarkModeAsync = () => {
AsyncStorage.getItem(asyncStorageKey)
.then((stringifiedIsDark) => {
const parsedTodos = JSON.parse(stringifiedIsDark);
if (!parsedTodos || typeof parsedTodos !== "object") return;
setScheme(parsedTodos);
})
.catch((err) => {
console.warn(err);
});
};
return (
<Switch
value={isDark}
onValueChange={toggleScheme}
thumbColor={colors.text}
trackColor={{ true: colors.text, false: colors.text }}
/>
);
};
ThemeContext.js
import * as React from "react";
import { useColorScheme } from "react-native-appearance";
import { lightColors, darkColors } from "../Theme/colorThemes";
export const ThemeContext = React.createContext({
isDark: false,
colors: lightColors,
setScheme: () => {},
});
export const ThemeProvider = (props) => {
const colorScheme = useColorScheme();
const [isDark, setIsDark] = React.useState(colorScheme === "dark");
React.useEffect(() => {
setIsDark(colorScheme === "dark");
}, [colorScheme]);
const defaultTheme = {
isDark,
colors: isDark ? darkColors : lightColors,
setScheme: (scheme) => setIsDark(scheme === "dark"),
};
return (
<ThemeContext.Provider value={defaultTheme}>
{props.children}
</ThemeContext.Provider>
);
};
export const useTheme = () => React.useContext(ThemeContext);
解决方案
useColorScheme()
返回string
或null
。但你有下一次签到restoreDarkModeAsync
if (!parsedTodos || typeof parsedTodos !== "object") return;
这就是它失败的原因。
这是切换方案的更正确和更干净的方法
const toggleScheme = () => {
const nextScheme = isDark ? "light" : "dark";
setScheme(nextScheme);
storeSetScheme(nextScheme);
};