如何在异步存储中存储东西？

Question

我在设置异步存储时遇到了一些问题。示例：如果用户已切换到暗模式，则当用户再次启动应用程序时，暗模式仍应启用。

我也不确定这样做是否正确。

感谢任何帮助。---------------------------------------- --------------------------------------

toggle.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);

Answer 1

useColorScheme()returnsstring或null。但是你有下一次入住 restoreDarkModeAsync

if (!parsedTodos || typeof parsedTodos !== "object") return;

这就是它失败的原因。

这是切换方案的更正确、更简洁的方法

const toggleScheme = () => {
    const nextScheme = isDark ? "light" : "dark";
    setScheme(nextScheme);
    storeSetScheme(nextScheme);
};

如何在异步存储中存储东西？

How to store things in asyncstorage?

javascript

react-native

asyncstorage