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

IT技术 javascript react-native
2021-01-18 19:41:17

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

我能够做到这一点，但我现在的问题是例如。如果我的主屏幕是主屏幕并且当我在我的应用程序和另一个应用程序之间导航时我当前在我的个人资料屏幕上然后返回我的应用程序我将返回到主屏幕而不是个人资料屏幕。

我该如何解决？

我应该在 AsyncStorage 中保存我的应用程序的当前状态吗？

我也在使用 React Context 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/>
2个回答

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

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>
  </>
);
我想我应该把 <Modal></Modal> 放在我的 NavigationContainer
2021-03-25 19:41:17
我刚刚尝试了您提供的代码，但它仍然无法正常工作，当我进入前台时不会发生。我应该在我提供的代码中添加 useEffect 吗？
2021-04-06 19:41:17

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

例子：


const { StyleSheet } = require('react-native');

const App = () =>{
  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(
 
 <AuthContext.Provider value= 
 {{user,setUser,authenticated,setAuthenticated}}>
 <NavigationContainer theme={navigationTheme} ref={navigationRef}>
   {
   (user&&authenticated)?<AppNavigator/>
   :(user)?<PasscodeNavigator/>
   :<AuthNavigator/>
   }
 </NavigationContainer>
 { (appState.current)!=='active' && <View style={StyleSheet.absoluteFillObject}><SplashScreen/></View> }
 </AuthContext.Provider>
)
}
嗨迈克，我刚刚尝试了你的解决方案，但它不起作用，飞溅是唯一被渲染的屏幕
2021-03-20 19:41:17
其它你可能感兴趣的问题
上一篇使用 Ajax 向 http 请求添加 CORS 标头 下一篇每个 JavaScript 程序员都应该知道什么？