React Native：如何使用NavigationExperimental正确实现React Native Drawer的导航？

Question

在React Native + Redux中，我有一个工作正常的React Native Drawer https://github.com/root-two/react-native-drawer，但是尝试使用NavigationExperimental （更具体地说是NavigationCardStack在其上实现导航按钮。 因此，我在抽屉上创建了三个按钮，当我尝试在它们之间进行导航时，出现一个错误： should not push route with duplicated key （例如，如果我先按ProfilePage按钮，然后按HomePage按钮，再按ProfilePage ，那么我会得到错误）

可能是什么问题？ 我是否在正确导航？ 如果不是，使用React Native Drawer上的导航按钮在场景之间导航的正确方法是什么？

这是我的设置：

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

    return (
      <route.component _handleNavigate={this._handleNavigate} 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
    }
  }

  <Drawer
    content={<DrawerPanel {...this.props} _handleNavigate={this._handleNavigate}/>}
    openDrawerOffset={100}
    ref={(ref) => this._drawer = ref}
    type='static'
    tweenHandler={Drawer.tweenPresets.parallax}
    tapToClose
    acceptPan
    negotiatePan
  >
    <NavigationCardStack
      direction='horizontal'
      navigationState={this.props.navigation}
      onNavigate={this._handleNavigate}
      renderScene={this._renderScene}
    />
  </Drawer>

按下_handleNavigate(route)来作为React Native Drawer上的导航按钮，这就是如何格式化route ：

const route = {
  group: {
    type: 'push',
    route: {
      key: 'profilepage',
      title: 'ProfilePage',
      component: ProfilePage,
      direction: 'horizontal',
    },
  }
}

.push和.pop由我的naviReducer.js处理

import { PUSH_ROUTE, POP_ROUTE } from '../Constants/ActionTypes'
import { NavigationExperimental } from 'react-native'

import Login from '../Components/Login'

const {
  StateUtils: NavigationStateUtils
} = NavigationExperimental

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

function navigationState (state = initialState, action) {
  if(action.type == PUSH_ROUTE && action.route.unique==true)
  {
     if(state.routes.find(child => child.key === key))
     {
        return NavigationStateUtils.jumpTo(state, action.route.key)
     }
  }

  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

Answer 1

请在此处查看对话和我的答案。 让我知道您的问题是否有意义。