替换一个新的StackNavigator，React Native

Question

我试图替换当用户通过“LogIn”阶段时不应该使用的StackNavigator。但我不知道如何做到这一点，我已经尝试过重置功能，但无法按照要求工作。

如何用新的替换旧的StackNavigator并使用该新的？如下面的例子所示，系统从一个堆栈开始，并且该按钮被按下后不应该使用该堆栈。

指数代码为例：

import React, { Component } from 'react'; 
import { AppRegistry, Button, StyleSheet, Text, View } from 'react-native'; 
import { NavigationActions, StackNavigator } from 'react-navigation'; 
import App from './App'; 

class StackNavigatorStuff extends Component { 

    static navigationOptions = { 
     title: 'Welcome', 
    }; 

    render() { 
    return (
     <View style={styles.container}> 
     <Text> 
      Welcome to this app 
     </Text> 
     <Text style={styles.instructions}> 
      Some login functions to become 
     </Text> 
     <Button title = 'Temp Login Function' onPress={() => /*Here should the stack be replaced with App.MainStackNav*/})}/> 
     </View> 
    ); 
    } 
} 

const resetAction = NavigationActions.reset({ 
    index: 0, 
    actions: [ 
    NavigationActions.navigate({routeName: 'Home'}) 
    ] 
}); 

const StackNavigatorLab = StackNavigator({ 
    Home: { screen: StackNavigatorStuff }, 
    //More to be 
}); 

AppRegistry.registerComponent('StackNavigatorLab',() => StackNavigatorLab); 

而且App.MainStackNav

const StackNavigatorLab = StackNavigator({ 

    Home: { screen: MainScreenNavigator }, 
    Chat: { screen: ChatNavigator }, 
    NavigationList: { screen: MyNotificationsScreen }, 
}); 

Answer 1

导航只能定义路由器内发生，所以你应该有一个导航包你想要的画面之间切换。

在你index文件的StackNavigatorLab，添加App.MainStackNav作为一个路线。即

const StackNavigatorLab = StackNavigator({ 
    Home: { screen: StackNavigatorStuff }, 
    Main: { screen: App.MainStackNav }, 
... 
}); 

然后你的复位动作看起来就像

const resetAction = NavigationActions.reset({ 
    index: 0, 
    actions: [ 
    NavigationActions.navigate({ routeName: 'Main' }) 
    ] 
}); 

使用navigation.dispatch派遣成功登录后，该复位动作。

如果你想分开两套StackNavigation屏幕，你可以有一个整体StackNavigator作为只是包装的Login组屏幕和Main设定画面的根。