Typescript - React Native：有办法保存开关按钮状态吗？答案

【问题标题】：Typescript - React Native: There is way to save switch button state?Typescript - React Native：有办法保存开关按钮状态吗？
【发布时间】：2022-08-09 20:41:03
【问题描述】：

有没有办法用asyncstorage 保存开关按钮状态？我的目标是当用户点击切换器时，即使用户退出应用程序并返回，它的状态也会被保留。

import { View, Text, Switch } from \'react-native\';
import React from \'react\';
import styles from \'./ViewFieldStyles\';

type Props = {
  title: string;
  value: boolean;
  setValue: () => void;
};

const ViewField = ({ title, value, setValue }: Props) => {
  return (
    <View style={styles.optionView}>
      <View style={styles.sameRowTextView}>
        <Text style={styles.optionText}>{title}</Text>
        <View style={styles.switchView}>
          <Switch
            trackColor={{ false: \'#767577\', true: \'rgba(4, 76, 163, 0.38)\' }}
            thumbColor={value ? \'#1d16db\' : \'#f4f3f4\'}
            ios_backgroundColor=\'#3e3e3e\'
            onValueChange={setValue}
            value={value}
          />
        </View>
      </View>
    </View>
  );
};

export default ViewField;

是的你可以。您将需要运行一个效果，只要带有开关的屏幕被聚焦，它就会从异步存储中检索状态并相应地设置您的开关。但是，如果您有多个用户使用该应用程序，我建议您将用户设置保存在数据库中而不是异步存储中。
还是使用 redux 坚持它更好的解决方案？

标签： javascript reactjs typescript react-native

【解决方案1】：

您可以使用AsyncStorage 轻松做到这一点。下面是一个例子。

安装和导入模块。

import AsyncStorage from '@react-native-async-storage/async-storage';

然后像下面这样使用它。

<Switch
  trackColor={{false: theme.negative, true: theme.positive}}
  onValueChange={(result) => {
    AsyncStorage.setItem(
      AsyncStorageKey.DarkMode,
      JSON.stringify(result),
    );
    changeThemeType(result ? 'dark' : 'light');
    setIsDarkMode(result);
  }}
  value={isDarkMode}
/>

要在组件加载时获取值，

const [isDarkMode, setIsDarkMode] = useState(false);

useEffect(() => {
  const setDarkMode = async (): Promise<void> => {
    const result = JSON.parse(
      (await AsyncStorage.getItem('IS_DARK')) || 'false',
    ) as boolean;

    setIsDarkMode(result);
  };

  setDarkMode();
}, []);

【讨论】：