React Navigation의 StackNavigator 헤더 안의 사용자 정의 닫기 버튼

Question

저는 현재 React Native와 협력 중이고 React Navigation과 StackNavigator에 대한 질문이 있습니다. 머리글에 사용자 지정 닫기 단추를 추가하고 싶습니다. 그러나이 작업을 수행하는 방법을 모르겠습니다.

화면으로 이동할 수는 있지만, 예를 들어 돌아가거나 무언가를 파견하는 것은 아닙니다.

예를 들어 HomeScreen의 navigationOptions이 작동합니다. 서랍이 열리고 SettingsButton이 설정 화면으로 이동합니다. 하지만 EntryScreen의 navigationOptions에 문제가 있습니다. 다시 돌아가려면 CloseButton을 빌드해야하지만 탐색 객체에 대한 액세스가 필요합니다.

navigate을 사용하면 다른 화면으로 이동할 수 있지만 부모 개체 인 navigation에 액세스해야합니다. 예를 들어 서랍 클래스에 대한 액세스는 props.navigation을 통해 액세스 할 수 있습니다 (예 : props.navigation.navigate('Home') 또는 props.navigation.goBack(null))

이것은 현재 코드의 일부입니다. 물론 현재 때문에 navigation에 누락 된 액세스 작동하지 않습니다 :

const Stack = StackNavigator({ 
    Home: { 
    screen: HomeScreen, 
    navigationOptions: { 
     header: ({ navigate }) => ({ 
     left: <DrawerButton navigate={navigate} />, 
     right: <SettingsButton navigate={navigate} /> 
     }) 
    } 
    }, 
    Entry: { 
    screen: EntryScreen, 
    navigationOptions: { 
     header: ({ navigation }) => ({ 
     right: <CloseButton navigate={navigation } /> 
     }) 
    } 
    } 
}) 

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

이이 버튼은 다음과 같습니다

export const CloseButton = (props) => { 
    let testButton = <TouchableHighlight onPress={() => props.navigation.goBack(null)}> 
    <Icon name='close' style={styles.headerButtonIcon} /> 
    </TouchableHighlight> 
    return testButton 
} 

export const SettingsButton = (props) => (
    <TouchableHighlight onPress={() => props.navigate('Settings')}> 
    <Icon name='more-vert' style={styles.headerButtonIcon} /> 
    </TouchableHighlight> 
) 

은 어쩌면 당신이 나를 도울 수 있습니다. 미리 감사드립니다!

Answer 1

나는 Github의 sigmazen 덕분에 답을 찾았습니다.

navigation 대신 CloseButton의 헤더에 goBack을 입력해야합니다. 이 후 나는 그것을 사용할 수있다. props.goBack(null)

Entry: { 
    screen: EntryScreen, 
    navigationOptions: { 
     title: `Eintrag`, 
     header: ({ goBack }) => ({ 
     right: <CloseButton goBack={goBack} /> 
     }) 
    } 
    }, 


export const CloseButton = (props) => { 
    let test = <TouchableHighlight onPress={() => props.goBack(null)}> 
    <Icon name='close' style={styles.headerButtonIcon} /> 
    </TouchableHighlight> 

    return test 
}