React Native中如何仅在应用安装时保存设置值及解决存储失效问题

我正在开发一款React Native应用，希望仅在应用首次安装时设置默认配置，之后用户修改的设置能被持久保存，不会每次启动都重置。我找了一些教程但只找到登录状态保持的内容，没找到对应方案，附上我的SettingsScreen.js初始代码：

import {
    StyleSheet,
    View,
    Text,
    TouchableOpacity,
    LayoutAnimation,
} from 'react-native';
import React, { useState } from 'react';

import colors from '../config/colors';

export default function SettingsScreen({ navigation }) {
    const [isNotificationOn, setIsNotificationOn] = useState(true);

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

    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();
                        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%',
    },
    buttonView: {
        alignItems: 'flex-end',
    },
    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',
    },
});

更新2：尝试持久化但未生效 #

我尝试用AsyncStorage实现，但关闭应用后设置不会保存，只有导航离开屏幕时临时生效，代码如下：

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

import colors from '../config/colors';

export default function SettingsScreen() {
    const [isNotificationOn, setIsNotificationOn] = useState();

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

    const retrieveSettings = async () => {
        console.log('retrieving');
        try {
            const value = await AsyncStorage.getItem('notificationOn');
            console.log('value: ', JSON.parse(value));
            if (value !== null) {
                // We have data!!
                setIsNotificationOn(JSON.parse(value));
            } else {
                console.log('it is null');
                setIsNotificationOn(true);
            }
        } catch (error) {
            // Error retrieving data
        }
    };

    const saveSettings = async (value) => {
        try {
            await AsyncStorage.setItem('notificationOn', JSON.stringify(value));
            console.log('saved: ', value);
        } catch (error) {
            // Error retrieving data
        }
    };

    useEffect(() => {
        retrieveSettings();
        console.log('on: ', isNotificationOn);
    }, []);

    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();
                        setIsNotificationOn(!isNotificationOn);
                        saveSettings(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%',
    },
    buttonView: {
        alignItems: 'flex-end',
    },
    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',
    },
});

问题解决方法 #

你的核心问题有两个：

1. 保存时机错误：setIsNotificationOn是异步更新状态的，调用saveSettings(isNotificationOn)时状态还没更新，保存的是旧值。
2. 首次安装初始化逻辑没问题，但需要确保默认值仅在首次安装时设置。

修改后的代码如下：

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

import colors from '../config/colors';

export default function SettingsScreen() {
    const [isNotificationOn, setIsNotificationOn] = useState(false);

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

    // 首次加载时读取设置，没有则初始化默认值
    useEffect(() => {
        const initSettings = async () => {
            try {
                const storedValue = await AsyncStorage.getItem('notificationOn');
                if (storedValue !== null) {
                    setIsNotificationOn(JSON.parse(storedValue));
                } else {
                    // 首次安装，设置默认值并保存
                    const defaultValue = true;
                    setIsNotificationOn(defaultValue);
                    await AsyncStorage.setItem('notificationOn', JSON.stringify(defaultValue));
                }
            } catch (error) {
                console.error('读取设置失败:', error);
            }
        };
        initSettings();
    }, []);

    // 状态变化时自动保存
    useEffect(() => {
        const saveCurrentSetting = async () => {
            try {
                await AsyncStorage.setItem('notificationOn', JSON.stringify(isNotificationOn));
            } catch (error) {
                console.error('保存设置失败:', error);
            }
        };
        // 避免初始加载时重复保存
        if (isNotificationOn !== undefined) {
            saveCurrentSetting();
        }
    }, [isNotificationOn]);

    const toggleNotification = () => {
        LayoutAnimation.easeInEaseOut();
        setIsNotificationOn(prev => !prev);
    };

    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={toggleNotification}
                >
                    <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%',
    },
    buttonView: {
        alignItems: 'flex-end',
    },
    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',
    },
});

关键修改点： #

• 拆分初始化和保存逻辑：首次加载时读取存储，无数据则设置默认值并保存，确保仅首次安装时初始化。
• 使用useEffect监听isNotificationOn变化，状态更新后自动保存，避免异步状态更新导致的保存旧值问题。
• 修复样式中的overFlow拼写错误，改为标准的overflow。
• 提取toggleNotification函数，使用函数式更新setIsNotificationOn(prev => !prev)确保拿到最新状态。

内容的提问来源于stack exchange，提问作者f1ian