从抽屉式导航的内部屏幕导航到外部堆栈屏幕,进行本地响应

时间:2018-06-28 08:22:56

标签: react-native react-navigation stack-navigator react-native-drawer

在我的应用程序中,它具有最外层的堆栈导航器,其中具有启动屏幕, 登录注册屏幕,登录屏幕,注册屏幕,忘记密码屏幕和一个应用程序抽屉屏幕,并且在抽屉菜单中有两个屏幕,两个独立的堆栈导航器分别用于主屏幕和设置屏幕,我无法导航到登录屏幕或来自家庭内部或设置屏幕的任何外部堆栈屏幕(例如注销后无法进入登录屏幕)。

我的外部堆栈文件代码为:

import React, { Component } from 'react';
import { createStackNavigator,  } from "react-navigation";

import { Login } from './Login';
import { Signup } from './Signup';
import { ForgetPassword } from './ForgetPassword';
import { LoginReg } from './LoginReg';
import { Splash } from './Splash';
import { AppDrawer } from "./AppDrawer";

class AppOuterStack extends Component {
    render() {
        return(
            <AppOuterStackMenu />
        );
    }
}
const AppOuterStackMenu = new createStackNavigator({
    Splash: {
        screen: Splash,
        navigationOptions: {
            header: null
        }
    },
    LoginReg: {
        screen: LoginReg,
        navigationOptions: {
            header: null
        }
    },
    Login: {
        screen: Login,
        navigationOptions: {
            title: "Login"
        }
    },
    Signup: {
        screen: Signup,
        navigationOptions: {
            title: "Register"
        }
    },
    ForgetPassword: {
        screen: ForgetPassword,
    },
    AppDrawer: {
        screen: AppDrawer,
        navigationOptions: {
            header: null
        }
    },
});
export { AppOuterStack };

我的抽屉菜单文件代码为:

import React, { Component } from 'react';
import { createDrawerNavigator } from "react-navigation";

import { SettingScreen, MainScreen } from './AppInnerScreens';

class AppDrawer extends Component {
    render() {
        return(
            <AppDrawerMenu />
        );
    }
}
const AppDrawerMenu = new createDrawerNavigator({
    MainScreen: {
        screen: MainScreen,
    },
    SettingScreen: {
        screen: SettingScreen,
    },
});
export { AppDrawer };

我的内部堆栈导航器代码是:

import React from 'react';
import { View ,  } from 'react-native';
import { createStackNavigator } from "react-navigation";
import { Text, Button, Icon } from 'native-base';
import { Main } from './Main';
import { Setting } from './Setting';

const SettingScreen = new createStackNavigator({
    Setting: {
        screen: Setting,
        navigationOptions : ({navigation}) =>{
            return {
                headerLeft: (
                    <View style={{ padding: 10 }} >
                        <Button transparent onPress={() => navigation.openDrawer()} >
                            <Icon style={{fontSize: 34,}} name="menu" />
                        </Button>
                    </View>
                )
            }
        }
    },
});
const MainScreen = new createStackNavigator({
    Main: {
        screen: Main,
        navigationOptions : ({navigation}) =>{
            return {
                headerLeft: (
                    <View style={{ padding: 10 }} >
                        <Button transparent onPress={() => navigation.openDrawer()} >
                            <Icon style={{fontSize: 34,}} name="menu" />
                        </Button>
                    </View>
                )
            }
        }
    }
});
export { SettingScreen, MainScreen };

我的注销代码是:

import React, { Component } from 'react';
import { View ,StyleSheet, AsyncStorage } from 'react-native';
import {
    Container, Content, Button, Text,
} from 'native-base';
import firebase from 'react-native-firebase';
import a,{ NavigationActions, StackActions } from 'react-navigation';


class Setting extends Component {

    signOut = ()=>{
        if(firebase.auth().user){
            firebase.auth().signOut().then(function() {
                console.log('Signed Out');
            }, function(error) {
                console.error('Sign Out Error', error);
            });
        }
        this.removeUser();


        // this.props.navigation.navigate("LoginReg");
        // console.log("to logreg", NavigationActions.NavigationActions);

        // AsyncStorage.removeItem("user").catch((error)=>{
        //     console.log("signOut err", error)
        // });
    }
    removeUser = ()=>{
        try {
            const value =  AsyncStorage.removeItem('user');
        } catch (error) {
            console.log("signOut err", error)
            // Error retrieving data
        }
    } 
    render() {
        return(
            <Container>
                <Content>
                    <Button block
                        onPress={()=> {
                            this.signOut();
                        }}
                    >
                    <Text>
                        Sign Out
                    </Text>
                    </Button>
                    <Button block
                        onPress={()=> {
                            console.log("to logreg", this.props.navigation);
                            this.props.navigation.dispatch(actionToDispatch);
                        }}
                    >
                    <Text>
                        test
                    </Text>
                    </Button>
                </Content>
            </Container>
        );
    }
}
export { Setting };
const actionToDispatch = StackActions.reset({
    index: 0,
    key: null,
    actions: [ 
        NavigationActions.navigate({ routeName: "Login" }),
    ],
});
const styles = StyleSheet.create({
    container: {
      flex: 1,
      justifyContent: 'center',
      alignItems: 'center',
    }
})

我的项目GitHub链接为https://github.com/ratnesh2581990/ShopApp2

0 个答案:

没有答案
相关问题