React Native 应用安装时持久化设置的指南

npm install @react-native-async-storage/async-storage
# 或者
yarn add @react-native-async-storage/async-storage

cd ios && pod install && cd ..

import React, { useState, useEffect } from 'react';
import {
    StyleSheet,
    View,
    Text,
    TouchableOpacity,
    LayoutAnimation,
    Platform, // 用于Platform.OS
} from 'react-native';
import AsyncStorage from '@react-native-async-storage/async-storage';

// 假设 colors 是一个包含应用颜色的配置对象
const colors = {
    primary: '#007AFF', // 示例颜色
    green: 'green',
    white: 'white',
    darkGray: '#333',
};

export default function SettingsScreen() {
    // 使用 undefined 作为初始状态，表示尚未从 AsyncStorage 加载
    const [isNotificationOn, setIsNotificationOn] = useState(undefined);

    const onColor = colors.green;
    const offColor = colors.primary;

    /**
     * 从 AsyncStorage 加载通知设置。
     * 如果设置不存在，则设置默认值并保存。
     */
    const retrieveSettings = async () => {
        try {
            const value = await AsyncStorage.getItem('notificationOn');
            if (value !== null) {
                // 如果存在已保存的值，则解析并更新状态
                setIsNotificationOn(JSON.parse(value));
            } else {
                // 如果是首次加载（或键不存在），设置默认值并立即保存
                const defaultValue = true; // 默认通知开启
                setIsNotificationOn(defaultValue);
                await saveSettings(defaultValue); // 保存默认值
            }
        } catch (error) {
            console.error("Error retrieving notification setting:", error);
            // 发生错误时，回退到默认值
            setIsNotificationOn(true);
            // 可以选择在这里再次尝试保存默认值，或根据需求处理
        }
    };

    /**
     * 将通知设置保存到 AsyncStorage。
     * @param {boolean} value - 要保存的通知状态。
     */
    const saveSettings = async (value) => {
        try {
            await AsyncStorage.setItem('notificationOn', JSON.stringify(value));
            console.log('Notification setting saved:', value);
        } catch (error) {
            console.error("Error saving notification setting:", error);
        }
    };

    // 在组件挂载时加载设置
    useEffect(() => {
        retrieveSettings();
    }, []); // 空数组表示只在组件首次渲染时运行一次

    // 当 isNotificationOn 状态改变时，自动保存到 AsyncStorage
    useEffect(() => {
        // 只有当 isNotificationOn 已经被初始化（不是 undefined）时才保存
        if (isNotificationOn !== undefined) {
            saveSettings(isNotificationOn);
        }
    }, [isNotificationOn]); // 依赖项为 isNotificationOn，当它变化时触发

    // 在 isNotificationOn 状态为 undefined 时，显示加载状态或不渲染 UI
    if (isNotificationOn === undefined) {
        return (
            <View style={styles.container}>
                <Text>Loading settings...</Text>
            </View>
        );
    }

    return (
        <View style={styles.container}>
            <View style={styles.textView}>
                <Text style={styles.notificationText}>Notifications: </Text>
            </View>
            <View style={styles.buttonView}>
                <TouchableOpacity
                    style={[
                        styles.touchable,
                        { borderColor: isNotificationOn ? onColor : offColor },
                    ]}
                    onPress={() => {
                        LayoutAnimation.easeInEaseOut();
                        // 直接更新状态，useEffect 会自动处理保存
                        setIsNotificationOn(!isNotificationOn);
                    }}
                >
                    <View
                        style={[
                            styles.innerView,
                            {
                                backgroundColor: isNotificationOn
                                    ? onColor
                                    : offColor,
                                alignSelf: isNotificationOn
                                    ? 'flex-end'
                                    : 'flex-start',
                            },
                        ]}
                    >
                        <Text style={styles.buttonText}>
                            {isNotificationOn ? 'ON' : 'OFF'}
                        </Text>
                    </View>
                </TouchableOpacity>
            </View>
        </View>
    );
}

const styles = StyleSheet.create({
    container: {
        padding: 15,
        paddingBottom: 50,
        flexDirection: 'row',
        flex: 1,
        width: '100%',
        backgroundColor: colors.white,
    },
    textView: {
        width: '70%',
        justifyContent: 'center', // 垂直居中
    },
    buttonView: {
        width: '30%', // 确保按钮视图占据剩余宽度
        alignItems: 'flex-end',
        justifyContent: 'center', // 垂直居中
    },
    buttonText: {
        color: 'white',
        fontSize: 12,
        fontWeight: '500',
    },
    innerView: {
        height: '100%',
        width: '50%',
        alignItems: 'center',
        justifyContent: 'center',
    },
    notificationText: {
        color: colors.darkGray,
        fontSize: 18,
        fontFamily: Platform.OS === 'android' ? 'Roboto' : 'Avenir',
        // width: '50%', // 移除或调整，让文本自适应
    },
    touchable: {
        height: 40,
        width: 80,
        borderRadius: 5,
        borderWidth: 1,
        overflow: 'hidden', // 修正 typo: overFlow -> overflow
    },
});