我正在为我的react原生应用程序使用React navigation v6。我一直在试图检测应用程序是否是用户第一次启动的。
我尝试通过AsyncStorage设置FIRST_LAUNCH
,然后根据它的值,我在Stack.Navigator
中设置initialRouteName
。这似乎不起作用,因为我开始知道createNativeStackNavigator
是同步的,并不等待getItem
的承诺被履行或拒绝来完成执行。
App.js
const App = () => {
useEffect(() => {
SplashScreen.hide();
},[]);
return (
<View style={styles.container}>
<Routes />
</View>
);
};
Routes.js
const Stack = createNativeStackNavigator();
function Routes(){
const [firstLaunch , setFirstLaunch] = useState(true);
const checkFirstLaunch = () => {
AsyncStorage.getItem('FIRST_LAUNCH').then(value => {
if(value === null){
AsyncStorage.setItem('FIRST_LAUNCH', 'false');
}
setFirstLaunch(false);
})
}
useEffect(() => {
checkFirstLaunch();
}, [])
return(
<NavigationContainer>
<Stack.Navigator
screenOptions={{
headerShown: false
}}
initialRouteName={firstLaunch ? 'Onboarding' : 'TenantHome'}
>
<Stack.Screen name="Onboarding" component={OnboardingRoutes} />
<Stack.Screen name="TenantHome" component={TenantRoutes} />
</Stack.Navigator>
</NavigationContainer>
)
}
export default Routes;
这似乎不起作用,firstLaunch
总是正确的。
我也读过一个解决方案,有人建议我自己制作一个闪屏,这是默认的第一个屏幕,并使用它来相应地导航到入职或租户主屏幕。但是我已经有了一个由LaunchScreen.xib
设置的闪屏,并在App.js中使用SplashScreen.hide()
隐藏它。我也不知道手动创建它是否是一种好的做法。
有人能帮我解决这个问题吗?
2条答案
按热度按时间s4chpxco1#
也许你应该像这样尝试async/await:
或者:
异步存储的工作方式与
localStorage
不同。这就是为什么有时候我们会有点困惑。我们从asyncstorage
得到不同的数据5sxhfpxr2#
如果你想使用
AsyncStorage
,那么下面的代码应该可以正常工作:如果上面的代码仍然不起作用,那么你可以尝试使用
react-native-sqlite-storage
。我知道它会增加代码的复杂性,但它比AsyncStorage
快得多,所以它也会提高应用的性能。检查下面的代码以供参考: