React Native expo-如何使用AsyncStorage仅显示屏幕

问题描述

我正尝试仅对首次应用程序用户显示一次“创建ProfileScreen”。 但是它似乎并没有达到预期的性能，我想这也许是由于我的逻辑，我将非常感谢您的帮助。这是我的逻辑和代码如下：

加载屏幕

import { AsyncStorage } from 'react-native'

export default LoadingScreen = ({ navigation }) => {

    const value = AsyncStorage.getItem('FirstTime')

    return navigation.navigate(value === null ? 'Register' : 'HomeScreen')

}

个人资料上下文

const saveLogin = async () => {
        try {
            await AsyncStorage.setItem('FirstTime','true')
            alert('saved')
        } catch (err) {
            alert(err)
        }
    }

const removeLogin = async () => {
        try {

            await AsyncStorage.removeItem('FirstTime')
            alert('Removed')

        } catch (err) {
            alert(err)
        }
    }

个人资料屏幕

完成个人资料表单后，您submit和value从'null'设置为'true'。因此，当我重新加载该应用程序时，即使删除了值或将其设置为“ null”，它也始终将我带到主页。

<TouchableOpacity onPress={()=>{onSubmit(),()=>saveLogin()}}>
        <Text style={{ color: '#fff',fontWeight: '500' }}>Submit</Text>
</TouchableOpacity>

解决方法

Ciao，AsyncStorage.getItem也是异步的。因此，您可以执行以下操作：

import { AsyncStorage,ActivityIndicator } from 'react-native'

export default LoadingScreen = ({ navigation }) => {
    
    componentDidMount() {
       AsyncStorage.getItem('FirstTime',(result) => {
          navigation.navigate(result === null ? 'Register' : 'HomeScreen')
       })
    }
    
  render() {
    return (
      <ActivityIndicator />
    );
  }
}

,

由于@Giovanni Esposito，我设法找到了解决方案。 我在加载屏幕中使用了getItem，在CreateProfile屏幕中使用了setItem。并完美地运作。谢谢：D

export default LoadingScreen = ({ navigation }) => {

    useEffect(() => {
        load()
    },[])

    const load = async () => {
        AsyncStorage.getItem('FirstTime').then(result => {
            if (result !== null) {
                navigation.navigate('HomeScreen')
            } else {
                navigation.navigate('Register')
            }
        })

    }

    return <ActivityIndicator />
}