authentication - 来自另一个文件的 React-Native react-navigation

Question

我在 RN 中导航有问题，所以我想你可以帮助我。我找不到从“设置”选项卡导航到“已注销”的任何方法，this is my repo ，代码并不复杂，你只需要在“navigation”和“screens”文件夹中查找即可。事情是我的“设置”文件在一个文件“MainTabNavigator”中，而 SignedOut 在“RootNavigation”中，当我尝试这样的事情时:

this.props.navigation.navigate("SignedOut");

什么也没发生，这是我的功能:

onSignOut()
.then(() => {
    console.log('Logout!');
    this.props.navigation.navigate("SignedOut");
})
.catch(e => {
    console.log(e);
})

我确实打印了此日志，因此它应该成功调用此导航方法。你有什么想法吗？我的意思是，我认为这就是我在这里遗漏了什么的原因？

这是我的 MainTabNavigator 的样子:

import React from 'react';
import { Platform } from 'react-native';
import { Ionicons } from '@expo/vector-icons';
import { TabNavigator, TabBarBottom, DrawerNavigator } from 'react-navigation';

import Colors from '../constants/Colors';

import HomeScreen from '../screens/HomeScreen';
import ListScreen from '../screens/ListScreen';
import SettingsScreen from '../screens/SettingsScreen';
import WordDetails from '../screens/WordDetails';
import DrawerMenu from './drawerDesign/Drawer';

export default DrawerNavigator(
  {
    Home: {
      screen: HomeScreen,
    },
    List: {
      screen: ListScreen,
    },
    Settings: {
      screen: SettingsScreen,
    },
    WordDetails: {
      screen: WordDetails,
    },
  }, {
    contentComponent: DrawerMenu,
    drawerWidth: 200,
    drawerPosition: "right",
    contentOptions: {
      activeTintColor: '#e91e63',
      itemsContainerStyle: {
        marginVertical: 0,
        opacity: 0.6

      },
      iconContainerStyle: {
        opacity: 0.6
      },
      style: {
        flex: 1,
        paddingTop: 35,
      },
    }
  }
);

SingedOut导航器:

import React from 'react';
import { Platform, StatusBar, Easing, Animated } from 'react-native';
import { Ionicons } from '@expo/vector-icons';
import { StackNavigator } from 'react-navigation';

import Colors from '../constants/Colors';

import SignIn from '../screens/SignInScreen';
import Register from '../screens/RegisterScreen';


const headerStyle = {
    marginTop: Platform.OS === "android" ? StatusBar.currentHeight : 0,
    backgroundColor: '#2b303b',
};

export default StackNavigator(
    {
        SignIn: {
            screen: SignIn,
            navigationOptions: {
                title: "Prijavi se",
                headerStyle,
                headerTitleStyle: {
                    color: '#f5f5f5'
                },
            },
        },
        Register: {
            screen: Register,
            navigationOptions: {
                title: "Prijavi se",
                headerStyle,
                headerTitleStyle: {
                    color: '#f5f5f5'
                },
            },
        }
    },
    {
        headerMode: "none",
        transitionConfig: () => ({
            transitionSpec: {
                duration: 1000,
                easing: Easing.step0,
                timing: Animated.timing,
            },
            screenInterpolator: sceneProps => {
                const { layout, position, scene } = sceneProps
                const { index } = scene

                const height = layout.initHeight
                const translateY = position.interpolate({
                    inputRange: [index - 1, index, index + 1],
                    outputRange: [height, 0, 0],
                })

                const opacity = position.interpolate({
                    inputRange: [index - 1, index - 0.99, index],
                    outputRange: [0, 1, 1],
                })

                return { opacity, transform: [{ translateY }] }
            },
        }),
    }
);

从这个“设置”屏幕我想从“SignedOutNavigator”继续这个“登录”..

Answer 1

据我了解，您正在构建一个应用程序，其中某些屏幕仅在用户登录时可用。

因此，当用户注销时，您应该清除导航历史记录，以便用户无法使用返回硬件按钮返回导航。

你应该做这样的事情:

this.props.navigation.dispatch(NavigationActions.reset({
            index: 0, key: null, actions: [ NavigationActions.navigate({ routeName: "SignedOut" }) ]
}));