React Native : NavigationExperimental을 사용하여 React Native Drawer의 탐색을 올바르게 구현하는 방법?

Question

React Native + Redux에서 작동하는 네이티브 드로어 https://github.com/root-two/react-native-drawer이 있지만 NavigationExperimental, 특히 NavigationCardStack을 사용하여 탐색 버튼을 구현하려고합니다. 그래서 나는 서랍에 3 개의 버튼을 만들었고, 그 사이를 탐색하려 할 때 should not push route with duplicated key 버튼을 누른 다음 ProfilePage 버튼을 누른 다음 ProfilePage 버튼을 다시 누른 다음 HomePage 버튼을 누르면 오류가 발생합니다.

무엇이 문제 일 수 있습니까? 나는 정확하게 항해 중입니까? 그렇지 않은 경우 React Native Drawer의 탐색 버튼을 사용하여 장면 사이를 탐색하는 적절한 방법은 무엇입니까? 여기

는 내 설정 :

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

그리고 다음 반작용 기본 서랍에있는 탐색 버튼을 눌러에 _handleNavigate(route)를 사용

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

이는 route 포맷 될 것이다 어떻게 .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

대화 here과 내 대답을 확인하십시오. 귀하의 문제에 대해 이해가되는지 알려주십시오.