React-Native reagieren-Navigation aus einer anderen Datei

Question

Ich habe ein Problem mit der Navigation in RN, so dass ich dachte, Sie könnten mir helfen. Ich finde keine Möglichkeit, von meiner Registerkarte "Einstellungen" zu meinem "SignedOut" zu navigieren, this is my repo, Code ist nicht kompliziert, alles, was Sie suchen müssen, ist in "Navigation" und "Bildschirme" Ordner. Das Ding ist meine „Einstellungen“ Datei in eine Datei „MainTabNavigator“ und SignedOut ist in „RootNavigation“, und wenn ich so etwas wie dies versuchen:

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

nichts passiert, der hier ist meine Funktion dafür:

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

Ich bekomme dieses Protokoll ausgedruckt, so dass es diese Navigationsmethode erfolgreich aufrufen sollte. Hast du irgendwelche Ideen warum? Ich meine, dass das der Grund ist, dass ich hier etwas verpasst habe?

Dies ist, was mein MainTabNavigator wie folgt aussieht:

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 }] } 
      }, 
     }), 
    } 
); 

Und von diesem Bildschirm "Einstellungen" i auf dieser "SignIn" von "SignedOutNavigator" gehen wollen ..

Answer 1

Von nennen, was ich verstehe Sie eine Anwendung erstellen, die einen Teil davon Bildschirme ist nur verfügbar, wenn der Benutzer in versengt wird.

Also, wenn die Benutzerabmeldung Sie sollten den Verlauf der Navigation löschen, damit der Benutzer nicht mehr mit der Schaltfläche Zurück Hardware navigieren kann.

Sie sollten so etwas wie tun:

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

Answer 2

ich glaube u müssen die Bildschirme in app.js

erklären

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

Dann kann u this.props.navigation.navigate("YOURSCREEN");