如何从抽屉导航器重置为反应原生的标签导航器?

时间:2017-11-30 11:14:44

标签: javascript react-native react-navigation

这是我当前的导航

const MainNavigator = TabNavigator(
    {
        SignIn: {
            screen: SignInScreen,
        },
        Home: {
            screen: SubNavigator,
        }
    },
    {
        navigationOptions: {
            tabBarVisible: false,
            swipeEnabled: false
        },
        initialRouteName: 'SignIn',
        lazy: true  
    }
);

const SubNavigator = DrawerNavigator(
    {
        Page1: {
            screen: StackNavigator(
                {
                    pageOne: { 
                        screen: ScreenOne,
                        navigationOptions: ({ navigation }) => ({
                            title: 'One',
                            headerLeft: (
                                <TouchableOpacity onPress={() => navigation.navigate('DrawerOpen')}>
                                  <IOSIcon name="ios-menu" size={30} />
                                </TouchableOpacity>
                              ),
                              headerStyle: { paddingRight: 10, paddingLeft: 10 },
                        })
                    },
                    pageTwo: { screen: ScreenTwo },
                    camera: { 
                        screen: CameraScreen,
                        navigationOptions: {
                            title: 'Camera'
                        }
                     },
                    qrscanner: { 
                        screen: QRScanner,
                        navigationOptions: {
                            title: 'QR Scanner'
                        }
                     },
                },  
            )
            },
        Profile: {
            screen: ProfileScreen,  // log out from here
                },
    }, 
    {
        contentComponent: SideMenu,
        initialRouteName: 'Driver',
        contentOptions: {
            activeTintColor: '#e91e63'
        }
    }

);

我想从Profile退出并将其重置为SignIn。它由onPress触发。

Profile的内部代码我放置了函数并渲染了这样的文本

/*.......*/
navigateToReset(route) {
    const navigateReset = NavigationActions.reset({
        index: 0, key: null, actions: [NavigationActions.navigate({ routeName: route })], 
    });
    this.props.navigation.dispatch(navigateReset);
}

onButtonPressSignOut = () => {
    this.navigateToReset('SignIn');
}

/*....*/

render () {
    return(
        <View>
            <Text onPress={this.onButtonPressSignOut}>
                Sign Out
            </Text>
        </View>
    );
}

但是这给了我错误:

Error: There is no route defined for key SignIn.
Must be one of: 'pageOne', 'pageTwo', 'camera', 'qrscanner'

我在网上搜索过,发现了几个像这样的问题。

这是我发现的一些问题:Issue1Issue2但它对我不起作用。

我是否遗漏了上述代码中的内容?

感谢您的帮助和建议。

0 个答案:

没有答案