React Navigation 的 StackNavigator 标题内的自定义关闭按钮答案

【问题标题】：Custom close button inside the header of StackNavigator of React NavigationReact Navigation 的 StackNavigator 标题内的自定义关闭按钮
【发布时间】：2017-08-14 16:55:26
【问题描述】：

我目前正在使用 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>
)

也许你可以帮助我。提前致谢！

【问题讨论】：

标签： javascript react-native navigation react-navigation

【解决方案1】：

感谢 Github 上 sigmazen 的帮助，我找到了答案。

我必须将 goBack 放入 CloseButton 的标题中，而不是 navigation。在此之后，我可以通过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
}

【讨论】：