在NavigationExperimental NavigationCardStack

Question

我在RN应用中使用NavigationCardStack中的NavigationExperimental。

有没有办法有条件地显示导航栏上的后退按钮？

我在文档中发现了以下声明，似乎坚持认为它们并非如此，但是这些简单的事情无法完成是没有意义的。

  The CardStack example loses out on some of the modal functionality,      
  such as disabling the back gesture responder, and "closing" the modal 
  results in a horizontal transition instead of a vertical. These things 
  cannot be overriden due to how the CardStack component is currently written.

我的实现如下：

render() {

  let backAction = ()=> this.props.dispatch(navigatePop());
  let onNavigate = (action)=> backAction();
  return (
    <View style={ styles.container }>
          <NavigationCardStack
            navigationState={this.props.navigationState}
            onNavigateBack={backAction}
            onNavigate={onNavigate}
            style={styles.container}
            direction='horizontal'
            renderOverlay={props => this._renderHeader(props,backAction)}
            renderScene={this._renderScene}
          />
    </View>
  );
}

_renderScene({scene}) {
  const { navigationState } = scene
  switch(navigationState.key) {
  case 'Login':
    return <Login />
  case 'Profile':
    return <Profile />
  case 'Home':
    return <MainNavigation />
  case 'Create Group':
    return <CreateGroup />
  }
}

_renderHeader(props,backAction){
  return (
      <NavigationHeader
      {...props}
      onNavigateBack={backAction}
      renderTitleComponent={props => this._renderHeaderTitle(props)}
    />
  )
}

_renderHeaderTitle(props){
  let title = props.scene.navigationState.title
  if(title == 'Home'){
    title = this._renderSubTitle(props);
  }
  return <NavigationHeader.Title>{title}</NavigationHeader.Title>
}

_renderSubTitle(props){
    var navigation = this.props.mainNavigation;
        var tab = navigation.children[navigation.index];
        return tab.title;
    }
}

Answer 1

你可以这样做：

_renderLeft(props){
  // Insert code to render back button.
  // props.scene.index and props.scene.route.key will help you identify the navigation route you're currently in.
}
_renderHeader(props, backAction){
  return (
    <NavigationHeader
      {..props}
      onNavigateBack={backAction}
      renderTitleComponent={props => this._renderHeaderTitle(props)}
      // new code below
      renderLeftComponent={props => this._renderLeft(props)}
    />
  )
}