首页 文章

React Navigation的StackNavigator Headers 内的自定义关闭按钮

提问于
浏览 次
2

我'm currently working with React Native and there I'有一个关于React Navigation和 StackNavigator 的问题 . 我想在 Headers 中添加一个自定义关闭按钮，但我不知道该怎么做 .

我可以导航到屏幕，但不是例如回去或发送一些东西 .

在我的例子中 HomeScreen 的 navigationOptions 正在运行 . 抽屉打开， SettingsButton 导航到设置屏幕 . 但我对 EntryScreen 的 navigationOptions 有问题 . 在那里我 Build 一个 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 回答

  • 2

    感谢在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
}
    回复于

相关问题