身份验证 – 来自另一个文件的React-Native反应导航

2023年10月29日 187次阅读

我在RN中导航有问题,所以我认为你可以帮助我.我找不到任何方式从我的“设置”选项卡导航到我的“SignedOut”,
this is my repo,代码并不复杂,所有你需要看的是“导航”和“屏幕”文件夹.事情是我的“设置”文件在一个文件“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”..

最佳答案 根据我的理解,您正在构建一个应用程序,其中某些屏幕仅在用户被查看时才可用.

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

你应该做的事情如下：

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