来自另一个文件的React-Native反应导航

Question

我在RN中导航时遇到问题，因此我认为您可以为我提供帮助。我找不到从“设置”选项卡导航到“ SignedOut”的任何方法，这是我的仓库，代码并不复杂，您只需要在“导航”和“屏幕”文件夹中查看即可。我的“设置”文件在一个文件“ 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,
      },
    }
  }
);

SingedOutNavigator：

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”进入这个“ SignIn”。

Answer 1

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

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

你应该做类似的事情：

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