我正在使用具有以下路由结构的应用程序:
root // tab navigator
A // stack navigator
A1
A2 -> B
B // stack navigator
B1
B2
B3 -> C
C
根导航由一个标签导航器组成。该选项卡导航器上的两条路由(A和B)包含堆栈导航器。
我正在努力做到这一点,以便每当用户单击B选项卡时,B堆栈都会重置,因此在B堆栈安装时始终为用户提供B1的服务。
我以为我可以通过将以下事件添加到用户单击以导航到B的图标上来完成此操作(我的标签组件是自定义的:]
this.props.navigation.dispatch(StackActions.reset({
index: 0,
key: null,
actions: [NavigationActions.navigate({ routeName: 'B' })],
}));
但是,抛出:
Error: There is no route defined for key B.
Must be one of: 'A','A1','A2'
这使我感到困惑。有谁知道我可以如何强制B堆栈以编程方式重置为0?任何建议都会有所帮助!
// versions:
"react-navigation": "^4.0.10",
"react-navigation-stack": "^1.9.4",
"react-navigation-tabs": "^2.5.6",
const BStack = createStackNavigator(
{
B1: { screen: B1, },
B2: { screen: B2, },
B3: { screen: B3, },
},
{
initialRouteName: 'B1',
}
)
BStack.navigationOptions = ({navigation}) => {
global.B_NAVIGATOR = navigation; // could be stored in redux or elsewhere...
}
然后在我的根级别标签导航器中,我听用户是否单击了B标签。如果是这样,我只需使用.popToTop()
:重设B堆栈导航器。
class Tab extends React.Component { constructor(props) { super(props) this.handleClick = this.handleClick.bind(this) } handleClick() { if (global.B_NAVIGATOR) global.B_NAVIGATOR.popToTop(); this.props.navigation.navigate('B', {}); } render() { return ( <TouchableOpacity onPress={this.handleClick}> <Text>Link to B</Text> </TouchableOpacity> ) } }