2

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

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

4

1 回答 1

2

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

而不是navigation我必须放入goBackCloseButton 的标题中。在此之后，我可以通过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
}
于 2017-03-22T22:52:41.340 回答