React Native中createNativeStackNavigator屏幕状态持久化方案咨询

为啥会这样？
当你从Settings切回Profile时，Settings组件会被卸载，内部用useState存的状态直接就没了，下次再进Settings就重新初始化，所以之前选的状态会重置。不用AsyncStorage的话，核心思路就是把状态放到不会被卸载的地方——要么是父组件，要么是全局状态容器，或者让组件别被卸载。

解法一：把状态提到导航栈的父组件里 #

把Settings里的状态（比如那个DarkMode的isSelected）移到ProfileStackScreen里，通过props传给Settings。这样就算Settings卸载了，状态还保存在父组件里，下次进的时候直接用就行。

修改后的父组件代码 #

const ProfileStack = createNativeStackNavigator();
const ProfileStackScreen = () => {
  // 把状态放在这里，这个组件不会被卸载
  const [darkModeSelected, setDarkModeSelected] = React.useState(false);

  // 主题切换的逻辑也可以放这儿
  const toggleTheme = () => {
    // 你的主题切换代码
  };

  return (
    <ProfileStack.Navigator initialRouteName="Profiles">
      <ProfileStack.Screen name="Profiles" component={Profile} />
      <ProfileStack.Screen 
        name="settings" 
        component={Settings}
        // 把状态和方法传给Settings
        initialParams={{
          darkModeSelected,
          setDarkModeSelected,
          toggleTheme
        }}
      />
    </ProfileStack.Navigator>
  );
};

export default ProfileStackScreen;

调整Settings组件 #

不再自己维护状态，直接用父组件传过来的：

const Settings = ({navigation, route}) => {
  // 从route.params里拿父组件传的东西
  const { darkModeSelected, setDarkModeSelected, toggleTheme } = route.params;

  // 删掉内部的useState，直接用父组件的状态
  const Praise = useCallback(({message,txtclr})=>{
      return (
          <View style={styles.checkboxcontainer}>
              <Switch 
                  value={darkModeSelected}
                  onValueChange={()=>{
                      if(message==="DarkMode"){
                          toggleTheme();
                      }
                      setDarkModeSelected(prev=>!prev);
                  }}
                  style={styles.checkbox}
              />
          </View>
      )
  },[darkModeSelected, setDarkModeSelected, toggleTheme])

  // 下面的CommonComp、TogtherComp还有return部分都不变
  const CommonComp = ({title}) =>{
      return (
          <TouchableOpacity style={{margin: 6}}>
              <Text style={[styles.txt,{color:txtColr}]}>{title}</Text>
          </TouchableOpacity>
      )
  }
  const TogtherComp = ({msg}) =>{
      return (
          <TouchableOpacity>
              <View style={{flexDirection: "row",margin: 6}}>
              <Praise txtclr={txtColr} message={msg} />
              </View>
          </TouchableOpacity>
      )
  }
  return (
    <SafeAreaView style={{backgroundColor:bgcolr,flex:1}}>
      <ScrollView>
            <Text style={[{color:txtColr ,marginTop: 12},styles.txtsH]}>Notification Settings</Text>
            
            <CommonComp title="Followed Users" />
            <TogtherComp msg="DarkMode"/>
            <CommonComp title="Delete Account"/>
            <CommonComp title="Logout" />
        </ScrollView>
    </SafeAreaView>
  )
}

解法二：用React Context管理全局状态 #

如果之后有更多组件需要用这个状态（比如主题状态），用Context更方便，不用一层一层传props。

先创建ThemeContext #

import React, { createContext, useContext, useState } from 'react';

const ThemeContext = createContext();

export const ThemeProvider = ({ children }) => {
  const [darkModeSelected, setDarkModeSelected] = useState(false);

  const toggleTheme = () => {
    // 你的主题切换逻辑
  };

  return (
    <ThemeContext.Provider value={{ darkModeSelected, setDarkModeSelected, toggleTheme }}>
      {children}
    </ThemeContext.Provider>
  );
};

// 写个自定义hook，用起来更方便
export const useTheme = () => useContext(ThemeContext);

在根组件外层包一下Provider #

比如在App.js里：

import { ThemeProvider } from './ThemeContext';
import ProfileStackScreen from './ProfileStackScreen';

export default function App() {
  return (
    <ThemeProvider>
      <ProfileStackScreen />
    </ThemeProvider>
  );
}

在Settings组件里用Context #

import { useTheme } from './ThemeContext';

const Settings = ({navigation,route}) => {
  // 直接用自定义hook拿状态和方法
  const { darkModeSelected, setDarkModeSelected, toggleTheme } = useTheme();

  // Praise组件的代码直接用这些值就行，和上面解法一里的一样
  const Praise = useCallback(({message,txtclr})=>{
      return (
          <View style={styles.checkboxcontainer}>
              <Switch 
                  value={darkModeSelected}
                  onValueChange={()=>{
                      if(message==="DarkMode"){
                          toggleTheme();
                      }
                      setDarkModeSelected(prev=>!prev);
                  }}
                  style={styles.checkbox}
              />
          </View>
      )
  },[darkModeSelected, setDarkModeSelected, toggleTheme])

  // 其余代码不变...
}

解法三：让屏幕保持挂载（React Navigation 6+） #

React Navigation 6以后支持给屏幕加keepMounted: true的选项，这样切换屏幕时组件不会被卸载，状态自然就保留了。不过要注意，这样会占更多内存，适合小屏幕组件用。

修改ProfileStackScreen：

const ProfileStackScreen = () => {
  return (
    <ProfileStack.Navigator initialRouteName="Profiles">
      <ProfileStack.Screen name="Profiles" component={Profile} />
      <ProfileStack.Screen 
        name="settings" 
        component={Settings}
        options={{
          // 开启这个，组件就不会被卸载了
          keepMounted: true
        }}
      />
    </ProfileStack.Navigator>
  );
};

这个方法最简单，但如果屏幕里有大量数据或者复杂的副作用，可能会影响性能，自己权衡着用。

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