React Native expo - 如何使用 AsyncStorage 只显示一次屏幕

Question

我试图只向首次使用应用程序的用户展示我的 'Create 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>

Answer 1

再见，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 />
    );
  }
}

Answer 2

感谢@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 />
}

React Native expo - 如何使用 AsyncStorage 只显示一次屏幕

React Native expo - How to show screen only once with AsyncStorage

react-native

expo

asyncstorage