为什么在Regact Native的NavigationExperimental中接收错误'应该是带有重复密钥的推送路由'?

时间:2016-08-24 08:27:31

标签: reactjs react-native redux react-jsx

我的导航缩减器设置如下:

const {
  StateUtils: NavigationStateUtils
} = NavigationExperimental

const initialState = {
  index: 0,
  key: 'root',
  routes: [{
   key: 'login',
   title: 'Login',
   component: Login
  }]
}

function navigationState (state = initialState, action) {
  switch(action.type) {

    case PUSH_ROUTE:
      if (state.routes[state.index].key === (action.route && action.route.key)) return state
    return NavigationStateUtils.push(state, action.route)

    case POP_ROUTE:
      if (state.index === 0 || state.routes.length === 1) return state
      return NavigationStateUtils.pop(state)

   default:
     return state
  }
}

然后我的按钮组件触发操作并导航如下:

 handleBackAction() {
    if (this.props.navigation.index === 0) {
      return false
    }
    this.props.popRoute()
    return true
  }

  _handleNavigate(action) {
    switch (action && action.type) {
      case 'push':
        this.props.pushRoute(action.route)
        return true
      case 'back':
      case 'pop':
        return this._handleBackAction()
      default:
        return false
    }
  }

  _navigate(route){
    this.props._handleNavigate(route)
  }

  render(){
    const route = {
      type: 'push',
      route: {
        key: this.props.navKey,
        title: this.props.pageName,
        component: this.props.componentName
      }
    }

    return(
      <TouchableHighlight onPress={() => this._navigate(route)}>
        <Text style={styles}>{pr.pageName}</Text>
      </TouchableHighlight>
    )

我应该如何解决NavigationStateUtils以及我提供的reducer格式的问题?

谢谢

enter image description here

1 个答案:

答案 0 :(得分:1)

我认为当您尝试推送“登录”时会发生这种情况。再次按TouchableHighlight路线。您能否检查一下您的路由密钥(this.props.navKey)是否已登录&#39;。

所以答案是不重定向到相同的导航路线,而是使用状态来管理渲染。

此外,如果您刚刚开始,请检查如何使您的反应组件成为纯函数而不是类(egghead.io有一个很好的使用react-reactx连接的教程)。

编辑:

所以在与你进行了很多来回沟通之后,我想我得到了你想要实现的目标:你正试图获得标签行为&#34;使用NavigationExperimental并不是为了满足您的需求而开发的。正如我所说的,你需要重新解释你的问题以匹配你想要完成的事情。

所以,你要做的是合法的,但是默认的&#34;卡堆栈&#34;在各种教程中教授的行为是由于某种原因而不允许您执行您尝试执行的操作:假设您在登录&#39;之间切换。并且&#39;注册&#39;屏幕4次,然后按硬件后退按钮:您的预期行为是什么?我不会在“登录”之间来回走动。并且&#39;注册&#39; 4次,但只有一次,如此:&#39;登录&#39; - &GT;回来 - &gt; &#39;寄存器&#39; - &GT;回到你的应用程序之外。

我提出这个问题的原因是因为你的答案会决定你如何为这种行为编写自己的缩减器,因为除了pushpop之外,你必须为自己的行动编写自己的缩减器。 ,你会有tabSwitch动作,如果你想要我在上一段描述的行为,那将检查你的场景是否已被推入堆栈并将其拉到堆栈的顶部。