前端之家

  1. 首页
  2. 问答

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

• 问答

我正在使用具有以下路由结构的应用程序：

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",
lvshanglin 回答：React Native：没有为键X定义的路由必须是Y Z之一

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

,

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

,

这很粗略，但是我可以通过将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>
    )
  }
}
react-nativereact-navigationreact-navigation-stackreactjs
本文链接：https://www.f2er.com/3162935.html

大家都在问