javascript - React Navigation の StackNavigator のヘッダー内のカスタム閉じるボタン

Question

私は現在 React Native を使用していますが、React Navigation とStackNavigator. カスタムの閉じるボタンをヘッダーに追加したいのですが、これを行う方法がわかりません。

画面に移動することは可能ですが、たとえば、戻ったり、何かをディスパッチしたりすることはできません。

私の例では、navigationOptionsforHomeScreenが機能しています。ドロワーが開きSettingsButton、設定画面に移動します。しかし、私は の に問題がnavigationOptionsありEntryScreenます。そこで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>
)

多分あなたはそこで私を助けることができます。前もって感謝します！