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

Question

我在 RN 中遇到导航问题，所以我想你可以帮助我。我找不到任何方法从我的 "settings" 选项卡导航到我的 "SignedOut"、this is my repo，代码并不复杂，您只需查看 "navigation" 和 "screens"文件夹。事情是我的 "settings" 文件在一个文件 "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 }] }
            },
        }),
    }
);

从这个 "Settings" 屏幕我想从 "SignedOutNavigator"..

继续这个 "SignIn"

Answer 1

我认为您需要在 app.js 中声明屏幕。

import YOURSCREENfrom './src/screens/YOURSCREEN'

const Routes = {
    YOURSCREEN: { screen: YOURSCREEN}
}

然后你可以打电话给this.props.navigation.navigate("YOURSCREEN");

Answer 2

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

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

你应该这样做：

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

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

React-Native react-navigation from another file

navigation

authentication

react-native

react-navigation