Javascript 在应用程序进入前台之前记住状态

我有一个react原生项目，我必须实现一个功能，当应用程序处于非活动状态时，它会呈现一个徽标屏幕，当应用程序处于活动状态时，它会呈现应用程序

我能够做到这一点，但我现在的问题是，如果我的主屏幕是主屏幕，当我在我的应用程序和另一个应用程序之间导航时，我当前在我的配置文件屏幕上，那么返回到我的应用程序，我将返回主屏幕而不是配置文件屏幕

我该如何解决这个问题

我应该将应用程序的当前状态保存在异步存储中吗

我还使用了React上下文API，而不是redux

这是我所要求的代码：

const[isReady, setIsReady] = useState(false);
const[user,setUser]=useState();
const[authenticated,setAuthenticated]=useState();
const appState = useRef(AppState.currentState);
const [appStateVisible, setAppStateVisible] =useState(appState.current);

const _handleAppStateChange = (nextAppState) => {
if (
  appState.current.match(/inactive|background/) &&
  nextAppState === "active"
) {
  console.log("App has come to the foreground!");
}

appState.current = nextAppState;
setAppStateVisible(appState.current);
console.log("AppState", appState.current);
};

 useEffect(() => {
 AppState.addEventListener("change", _handleAppStateChange);
  return () => {
  AppState.removeEventListener("change", _handleAppStateChange);
  };
  }, []);

const restoreUser = async () => {
const user = await storage.getUser();
if (user) setUser(user);
};

if (!isReady)
return (
<AppLoading 
startAsync={restoreUser} 
onFinish={() => setIsReady(true)} 
onError={console.warn}
/>
);  

return(
 (appState.current)==='active'?
 <AuthContext.Provider value= 
 {{user,setUser,authenticated,setAuthenticated}}>
 <NavigationContainer theme={navigationTheme} ref={navigationRef}>
   {
   (user&&authenticated)?<AppNavigator/>
   :(user)?<PasscodeNavigator/>
   :<AuthNavigator/>
   }
 </NavigationContainer>
 </AuthContext.Provider>
 :
 <SplashScreen/>

const[isReady，setIsReady]=useState（false）；
const[user，setUser]=useState（）；
const[authenticated，setAuthenticated]=useState（）；
const-appState=useRef（appState.currentState）；
const[appStateVisible，setAppStateVisible]=useState（appState.current）；
const\u handleAppStateChange=（nextapstate）=>{
如果(
appState.current.match（/inactive | background/）&&
nextAppState==“活动”
) {
log（“应用程序已进入前台！”）；
}
appState.current=nextapstate；
setAppStateVisible（appState.current）；
log（“AppState”，AppState.current）；
};
useffect（（）=>{
AppState.addEventListener（“更改”，即handleAppStateChange）；
return（）=>{
AppState.removeEventListener（“更改”，_handleAppStateChange）；
};
}, []);
const restoreUser=async（）=>{
const user=wait storage.getUser（）；
如果（用户）设置用户（用户）；
};
如果（！isReady）
返回(
setIsReady（真）}
onError={console.warn}
/>
);  
返回(
（appState.current）=='active'？
{
（用户和身份验证）？
：（用户）？
:
}
:

当应用程序状态更改时，您可以在模式中显示/隐藏启动，而不是屏幕

import {  Modal } from "react-native";

const [modalVisible, setModalVisible] = useState(false);

const _handleAppStateChange = nextAppState => {
  if (
    appState.current.match(/inactive|background/) &&
    nextAppState === 'active'
  ) {
    setModalVisible(false);
  } else {
    setModalVisible(true);
  }
};


return (
  <>
    <AuthContext.Provider
      value={{ user, setUser, authenticated, setAuthenticated }}
    >
      <NavigationContainer theme={navigationTheme} ref={navigationRef}>
        {user && authenticated ? (
          <AppNavigator />
        ) : user ? (
          <PasscodeNavigator />
        ) : (
          <AuthNavigator />
        )}
      </NavigationContainer>
    </AuthContext.Provider>
    <Modal animationType="slide" transparent={true} visible={modalVisible}>
      <SplashScreen />
    </Modal>
  </>
);

从“react native”导入{Modal}；
const[modalVisible，setModalVisible]=使用状态（false）；
const\u handleAppStateChange=nextapstate=>{
如果(
appState.current.match（/inactive | background/）&&
nextAppState===“活动”
) {
setModalVisible（假）；
}否则{
setModalVisible（真）；
}
};
返回(
{用户身份验证（&A）(
)：用户(
) : (
)}
);

我看到了您的问题，您还有另一个选择，除了在AsyncStorage中保存状态外，您还可以将所有应用程序包装在一个导航容器中，并使用导航引用重定向

例如：

const{StyleSheet}=require（'react-native'）；
常量应用=（）=>{
const[isReady，setIsReady]=useState（false）；
const[user，setUser]=useState（）；
const[authenticated，setAuthenticated]=useState（）；
const-appState=useRef（appState.currentState）；
const[appStateVisible，setAppStateVisible]=useState（appState.current）；
const\u handleAppStateChange=（nextapstate）=>{
如果(
appState.current.match（/inactive | background/）&&
nextAppState==“活动”
) {
log（“应用程序已进入前台！”）；
}
appState.current=nextapstate；
setAppStateVisible（appState.current）；
log（“AppState”，AppState.current）；
};
useffect（（）=>{
AppState.addEventListener（“更改”，即handleAppStateChange）；
return（）=>{
AppState.removeEventListener（“更改”，_handleAppStateChange）；
};
}, []);
const restoreUser=async（）=>{
const user=wait storage.getUser（）；
如果（用户）设置用户（用户）；
};
如果（！isReady）
返回(
setIsReady（真）}
onError={console.warn}
/>
);  
返回(
{
（用户和身份验证）？
：（用户）？
:
}
{（appState.current）！='active'&&}
)
}

我删除了我的答案，因为它不是一个答案。这只是一个一般性的建议，我认为没有人能在没有你展示一些代码的情况下提供帮助。我个人无法提供帮助，因为我使用react-native已经有一段时间了，但也许我可以建议一些我需要查看的内容。我会记录已验证和用户状态，看看它们是否正确e您所期望的。如果它们不是您所期望的，那么您可能希望将它们存储在localstorage或redux中。正如@howtopythonpls建议调查已验证状态，似乎没有任何与restoreUser类似的setAuthenticated，并且您显示配置文件的条件我猜是两者兼而有之（用户和已验证）@agenthunt您好，谢谢您回复我。我的身份验证状态用于检查是否存在用户令牌，而不是呈现欢迎屏幕呈现密码屏幕。当前我的身份验证状态工作正常，我的问题是当我实现上述代码时，例如，假设我在设置屏幕上，然后转到另一个应用程序ck不返回设置屏幕我返回我的订阅源屏幕。在不知道详细信息的情况下，很难确定你的应用程序路由结构。再次在黑暗中拍摄。你的路由可能未保存，或者你的应用程序需要在哪个路由上派生的状态未保存或未正确派生，无法恢复正确的屏幕？@agenthunt在Tab Navigator组件中我指定了我的初始路由名称作为我的源屏幕，这可能是我从前台到达那里的原因吗？您需要什么信息？我刚刚尝试了您提供的代码，但它仍然不起作用，当我转到前台时不会发生。我应该在我提供的代码中添加useEffect吗？我想我应该放进我的导航容器里。我迈克，我刚刚尝试了你的解决方案，但它不起作用，splash是唯一一个被渲染的屏幕。splash中的代码是什么？