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の代わりに、goBackをCloseButtonのヘッダーに挿入する必要があります。この後、私はそれを使用することができます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 
}