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

它很粗略，但我可以通过将 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 2

这可能与构建设置有关，我会在博览会上得到这个，即使我清楚地定义了路由，并且它“出现”以重新加载 js。停止启动 expo 触发了更完整的构建，新路线将生效。

Answer 3

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

React Native：没有为键 X 定义路由必须是 Y Z 之一

React Native: There is no route defined for key X Must be one of Y Z

reactjs

react-native

react-navigation

react-navigation-stack