有條件地在導航實驗導航中顯示後退按鈕導航CardStack

Question

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

有沒有一種方法來有條件地顯示導航欄上的後退按鈕？

我在文檔中發現了下面的聲明，似乎堅持他們不是，但它只是沒有意義，這種簡單的事情無法完成。

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)} 
    /> 
) 
}