홈 화면에 대한 탐색 스택 재설정 (React Navigation and React Native)

Question

내비게이션 React Navigation과 React Native에 문제가 있습니다. 탐색을 재설정하고 홈 화면으로 돌아가는 것입니다.

DrawerNavigator 내부에 StackNavigator를 빌드하고 홈 화면과 다른 화면 간의 탐색이 작동합니다. 그러나 문제는 네비게이션 스택이 성장하고 성장한다는 것입니다. 스택에서 화면을 제거하는 방법을 모르겠습니다.

예를 들어 홈 화면에서 설정 화면으로 이동 한 다음 항목 화면으로 이동하고 마지막으로 다시 홈 화면으로 이동하면 홈 화면이 스택에서 두 번 표시됩니다. 뒤로 버튼을 사용하면 앱에서 빠져 나오지 않지만 다시 입력 화면으로 이동합니다.

홈 버튼을 다시 선택하면 스택을 재설정해도 좋지만이 방법은 잘 모릅니다. Here 누군가가 비슷한 문제를 가진 다른 사람을 도우려고했지만 해결책이 나에게 도움이되지 못했습니다.

const Stack = StackNavigator({ 
    Home: { 
    screen: Home 
    }, 
    Entry: { 
    screen: Entry 
    }, 
    Settings: { 
    screen: Settings 
    } 
}) 

export const Drawer = DrawerNavigator({ 
    Home: { 
    screen: Stack 
    }}, 
    { 
    contentComponent: HamburgerMenu 
    } 
) 

는 그리고 이것은 내가 당신이 날 도울 수 있기를 바랍니다 서랍 화면

export default class HamburgerMenu extends Component { 
    render() { 
    return <ScrollView> 
     <Icon.Button 
     name={'home'} 
     borderRadius={0} 
     size={25} 
     onPress={() => { this.props.navigation.navigate('Home')}}> 
     <Text>{I18n.t('home')}</Text> 
     </Icon.Button> 

     <Icon.Button 
     name={'settings'} 
     borderRadius={0} 
     size={25} 
     onPress={() => { this.props.navigation.navigate('Settings')}}> 
     <Text>{I18n.t('settings')}</Text> 
     </Icon.Button> 

     <Icon.Button 
     name={'entry'} 
     borderRadius={0} 
     size={25} 
     onPress={() => { this.props.navigation.navigate('Entry')}}> 
     <Text>{I18n.t('entry')}</Text> 
     </Icon.Button> 
    </ScrollView> 
    } 
} 

의 간단한 예입니다. 이것은 내비게이션의 필수 부분이며 솔루션은 훌륭합니다!

Answer 1

이것은 내가 그것을 할 방법이다. this.props.navigation을 사용자 구현에 맞게 조정할 수도 있습니다.

Answer 2

StackNavigator 및 DrawerNavigator에서 홈을 키로 사용했기 때문에 고유해야하며 이것이 그 문제를 만드는 이유입니다. DrawerNavigator 내부에서 Home을 Stack으로 대체 해 주시겠습니까?

reset(){ 
    return this.props 
       .navigation 
       .dispatch(NavigationActions.reset(
       { 
        index: 0, 
        actions: [ 
         NavigationActions.navigate({ routeName: 'Menu'}) 
        ] 
        })); 
    } 

적어도 '홈'과 '메뉴'대체 :이 도움이 될 것입니다

희망 :

Answer 3

뒤로를 사용하려면 경로와 연결된 고유 키를 찾아야합니다. 내비게이션 감속기 내에서 기존 상태를 검색하여 해당 경로를 사용하는 스택의 첫 번째 경로를 찾고 해당 키 &을 뒤로 가져 가면됩니다. Back (뒤로)를 누르면 경로 이전에 화면으로 이동합니다. 여기

let key; 

    if (action.payload) { 
    // find first key associated with the route 
    const route = action.payload; 

    const routeObj = state.routes.find((r) => r.routeName === route); 

    if (routeObj) { 
     key = { key: routeObj.key }; 
    } 
    } 

    return AppNavigator.router.getStateForAction(NavigationActions.back(key), state); 

Answer 4

내가 그것을 할 방법은 다음과 같습니다 부모 네비게이터 아이 네비게이터 에서 을 탐색하는 동안 스택을 쳐

import { NavigationActions } from 'react-navigation' 

this.props.navigation.dispatch(NavigationActions.reset({ 
    index: 0, 
    key: null, 
    actions: [NavigationActions.navigate({ routeName: 'ParentStackScreen' })] 
})) 

The important part is key: null .

.

이 오류 얻을 경우 그렇게 : 애니메이션

를, 내가

// https://github.com/oblador/react-native-animatable 
import * as Animatable from 'react-native-animatable' 

난 그냥 모든 애니메이션 나 자신을 제어하는 ​​사용합니다.<Animatable.View>으로 포장하여 에 넣으십시오. 원하는 모든 구성 요소는입니다.