React Native:没有为键X定义路由.必须是Y Z中的一个

Question

我正在开发一个具有以下路由结构的应用程序：

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",

Answer 1

这可能与构建设置有关，我会在expo中得到这个，尽管我已经明确定义了路由；出现"；以重新加载js。世博会的停止启动引发了一场更完整的建设，新路线将生效。

Answer 2

这是粗略的，但我能够通过将B路由器保存到全局命名空间中来运行它：

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>
)
}
}

Answer 3

我删除了StackNavigator并且没有完全重新启动应用程序后得到了这个。我的解决方案是停止应用程序并运行expo start -c，它在启动时清除一些缓存。