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

在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：如何使用NavigationExperimental正确实现React Native Drawer的导航？

可能是什么问题？我的导航是否正确？如果不是，使用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)有关阵营本地抽屉导航按钮，这就是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

来源

2016-09-14 Jo Ko

请查看对话here和我的回答。让我知道你的问题是否合理。

来源

2016-09-14 09:54:18

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

回答

相关问题