开发者问题收集

无法读取未定义的属性“导航”,即使它正在工作

2019-04-20
73

我有这个登录屏幕,它可以正常工作,但它显示此警告,我对此感到担心。当我单击 headerRight 按钮时,我必须注销并返回到登录屏幕。

我已经尝试了该网站提供的所有功能

这是我的课程

class AuthLoadingScreen extends Component{
    constructor(props){
        super();
        this._loadData();   
    }

    _loadData = async() => {
        const isLoggedIn = await AsyncStorage.getItem('access_token');
        console.log(isLoggedIn);
        this.props.navigation.navigate(isLoggedIn == null? 'Login' : 'Home');
    }

    _removeToken = async(navigation) => {
        console.log('test');
        await AsyncStorage.clear();
        navigation.navigate('Login');
    }

    render(){
        return(
            <View><ActivityIndicator/></View>
        );
    } 
}

这是我调用 _removeToken 函数的地方

const StackNavigator = createStackNavigator({
    AuthLoading: AuthLoadingScreen,
    Login: {
        screen: Login,
    },
    Register: {
        screen: Register,
    },
    Home: {
        screen: TabNavigator,
        navigationOptions: ({navigation}) => ({
            title: 'Insta Clone',
            headerLeft: null,
            headerTitleStyle: { 
                textAlign:"center", 
                flex:1 
            },
            headerRight: (
                <Button
                    icon={
                        <Icon
                        name='sign-out'
                        type='octicon'
                        color='black'
                        />
                    }
                    onPress={() => (new AuthLoadingScreen)._removeToken(navigation)} // <--- HERE
                    buttonStyle={ {backgroundColor: 'transparent'} }  
                />
            ),
            headerLeft: (
                <Button
                    icon={
                        <Icon
                        name='info'
                        type='octicon'
                        color='black'
                        />
                    }
                    onPress={() => alert("Created by Matheus Melo")}
                    buttonStyle={ {backgroundColor: 'transparent'} } 
                />
            ),
        })
    },
});

1个回答

您可以直接导航到 Login ,无需使用 AuthLoadingScreen 引用,更新后的代码应如下所示:

const removeToken = async(navigation) => {
        console.log('test');
        await AsyncStorage.clear();
        navigation.navigate('Login');
    }
const StackNavigator = createStackNavigator({
    AuthLoading: AuthLoadingScreen,
    Login: {
        screen: Login,
    },
    Register: {
        screen: Register,
    },
    Home: {
        screen: TabNavigator,
        navigationOptions: ({navigation}) => ({
            title: 'Insta Clone',
            headerLeft: null,
            headerTitleStyle: { 
                textAlign:"center", 
                flex:1 
            },
            headerRight: (
                <Button
                    icon={
                        <Icon
                        name='sign-out'
                        type='octicon'
                        color='black'
                        />
                    }
                    onPress={() => removeToken(navigation)}
                    buttonStyle={ {backgroundColor: 'transparent'} }  
                />
            ),
            headerLeft: (
                <Button
                    icon={
                        <Icon
                        name='info'
                        type='octicon'
                        color='black'
                        />
                    }
                    onPress={() => alert("Created by Matheus Melo")}
                    buttonStyle={ {backgroundColor: 'transparent'} } 
                />
            ),
        })
    },
});

Aadil Mehraj
2019-04-20