目前，我使用 NavigationStateUtils 使用 React Native/Redux 设置了 Push 和 Pop。但是，当多次按下触发 Push 操作的按钮时，我收到错误消息:should not push * route with duplicated key and * representing route.key or this.props.navKey。

错误的原因可能是什么？我应该如何使用 NavigationStateUtils 为每个单独的路由创建一个唯一的键？

这是我的设置 - 终极版:

function mapStateToProps(state) {
  return {
    navigation: state.navReducer,
  }
}

export default connect(
  mapStateToProps,
  {
    pushRoute: (route) => push(route),
    popRoute: () => pop(),
  }
)(NavigationRoot)

我的 reducer (navReducer.js):

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

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

  }
}

export default navigationState

这些方法处理推送和弹出以及如何设置导航栏后退(弹出)按钮:

  _renderScene (props) {
    const { route } = props.scene

    return (
      <route.component _handleNavigate={this._handleNavigate.bind(this)} {...route.passProps} actions={this.props}/>
    )
  }

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

renderOverlay = (sceneProps) => {
if(0 < sceneProps.scene.index)
{
  return (
    <NavigationHeader
      {...sceneProps}
      renderLeftComponent={() => {
        switch(sceneProps.scene.route.title){
          case 'Home':
            return (
              <TouchableHighlight onPress={() => this._handleBackAction()}>
                <Text}>X</Text>
              </TouchableHighlight>
            )
          }
        }
      }
    />
  )
}
  }

  render() {
    return (
        <NavigationCardStack
          direction={this.props.navigation.routes[this.props.navigation.index].direction}
          navigationState={this.props.navigation}
          onNavigate={this._handleNavigate.bind(this)}
          renderScene={this._renderScene}
          renderOverlay={this.renderOverlay}
        />
    )
  }

然后像这样被组件调用:

const route = {
  home: {
    type: 'push',
    route: {
      key: 'home',
      title: 'Home',
      component: Home,
      direction: 'vertical',
    }
  }
}

编辑控制台日志

EDIT 2 继续

编辑 3 个幻灯片菜单

最佳答案

像这样调试你的导航缩减器:

function navigationState (state = initialState, action) {
  switch(action.type) {
    case PUSH_ROUTE:
      console.log('action', action);
      if (state.routes[state.index].key === (action.route && action.route.key)) return state
      const newNavigationState = NavigationStateUtils.push(state, action.route);
      console.log('newNavigationState', newNavigationState);
      return newNavigationState;

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

   default:
     return state

  }
}

编辑

由于 NavigationStateUtils.push 的工作方式(参见 here )，它需要一个全新的路由来推送到路由堆栈。根据您的导航流程，您不能再次使用它回家，您必须使用不同的功能，如 NavigationStateUtils.pop或 NavigationStateUtils.reset以及其他人(浏览该文件)。但是，您不仅限于 NavigationStateUtils 中的函数，您可以在 reducer 中定义自己的修改，但需要确保导航状态具有以下数据格式:

{
  // `routes` needs to be an array of objects and each object
  // needs to have a unique `key` property
  routes: [{
    key: 'anything', // must be unique in this `routes` array
    ...anyOtherData
  }],
  // `index` is required, and has to be a number that refers 
  // to the index of the route in the routes array that is active
  index: 1,
}

编辑

根据您在评论中的要求，每次您点击抽屉项目时，都需要reset您的导航路线堆栈以该路线为起点，然后您可以开始推送和弹出。

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)

    case DRAWER_ITEM_PRESS:
      // `action.route` is simply the route object of the drawer item you pressed
      return NavigationStateUtils.reset(state, [action.route], 0);
    default:
      return state;
  }
}

作为另一个旁注，我看到根据您的要求，尝试使用 react-native-router-flux 可能是个好主意因为您将能够定义您的 routes , sub-routes , integrate with react-native-drawer和 integrate with Redux .

关于javascript - 如何在 React Native/Redux 中使用推送路由为 NavigationStateUtils 创建唯一键？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39340131/