React Navigation V5 - экраны условного навигатора, основанные на значении хранилища asyn c

Question

Использование следующего руководства для реагирования навигации V5

Я добавил экран приветствия и домашний экран в навигатор стека, и у меня есть токен в Asyn c Хранилище , чтобы проверить значение токена

, если токен истинен, навигатор должен отобразить дом, и если он нулевой, он отобразит экран приветствия

теперь как асинхронный c хранилище как асинхронный welcomeScreen отображается при каждом запуске приложения.

let check = null
getData = async () => {
try {
const value = await AsyncStorage.getItem('@firstLaunch')
if(value !== null) {
check === value
}
} catch(e) {
// error reading value
}
}

return (
<Stack.Navigator>
{check === null ? (
// No token found, render welcome screen
<Stack.Screen
name="welcome"
component={WelcomeScreen}
}}
/>
) : (
// render HomeScreen
<Stack.Screen name="Home" component={HomeScreen} />
)}
</Stack.Navigator>
);

    let check = null
getData = async () => {
try {
const value = await AsyncStorage.getItem('@firstLaunch')
if(value !== null) {
check === value
}
} catch(e) {
// error reading value
}
}

return (
<Stack.Navigator>
{check === null ? (
// No token found, render welcome screen
<Stack.Screen
name="welcome"
component={WelcomeScreen}
}}
/>
) : (
// render HomeScreen
<Stack.Screen name="Home" component={HomeScreen} />
)}
</Stack.Navigator>
);

Answer 1

Возможно, вам нужно что-то, что использует эффект. Хук useEffect из Reaction-native делает именно это.

Вот вам пример:

import React from 'react'
import { Text, View, StyleSheet } from 'react-native'
import { NavigationContainer } from '@react-navigation/native'
import { createStackNavigator } from '@react-navigation/stack'
import AsyncStorage from '@react-native-community/async-storage'

const Stack = createStackNavigator()

const WelcomeScreen = () => <View style={styles.view}><Text>Welcome Screen</Text></View>
const HomeScreen = () => <View style={styles.view}><Text>Home Screen</Text></View>

export default props => {

    const [token, setToken] = React.useState(null)
    const [isLoaded, setLoaded] = React.useState(false)

    React.useEffect(() => {
        const getData = async () => {
            try {
                const token = await AsyncStorage.getItem('@firstLaunch')
                if(token !== null)
                    await setToken(token)
            } catch(e) {
            // error reading value
            }
            setLoaded(true)
        }

        getData()

        return () => null
    },[])

    // this is needed so you don't have that blink from Welcome to Home (When you have a token but it's not set yet in the state)
    if(!isLoaded)
        return null

    return (
        <NavigationContainer>
            <Stack.Navigator>
                { token === null
                    ? <Stack.Screen name="Welcome" component={WelcomeScreen} />
                    : <Stack.Screen name="Home" component={HomeScreen} />
                }
            </Stack.Navigator>
        </NavigationContainer>
    )
}

const styles = StyleSheet.create({
    view: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center'
    }
})