我正在尝试替换当用户通过“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 },
});
答案 0 :(得分: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
屏幕集。