陣營導航 - 導航行動=回

Question

我想用回動作從反應導航駁回模式如下：

this.props.navigation.dispatch(NavigationActions.back({ 
    key: this.props.navigation.state.params.previousKey 
})); 

導航到該模式時，我通過以前的屏幕鍵：

this.props.navigation.navigate('ModalScreen', { 
    previousKey: this.props.navigation.state.key 
}); 

但是什麼也沒有發生。

當我不使用鍵時，通過單擊按鈕調用該函數時，navigationaction.back會正確地將模式退回到上一個屏幕。

但是，當我把它從構造函數，它發回的根屏幕...

任何想法？

編輯1

試圖用自定義操作如下另一種方法。當我重新加載應用程序並嘗試它時，它會在第一次正常運行。但是，當我再次嘗試第二次而沒有重新加載應用程序，然後我得到的錯誤：無法讀取未定義的屬性'路線'。

在我router.js文件：

const CheckInStack = StackNavigator({ 
    CheckIn: { 
     screen: CheckIn, 
     navigationOptions: { 
      header: null, 
      headerLeft: null, 
      gesturesEnabled: false, 
     } 
    } 
}); 

export const SiteStack = StackNavigator({ 
    Site: { 
     screen: Site, 
     navigationOptions: { 
      header: null, 
      headerLeft: null, 
      gesturesEnabled: false, 
     } 
    }, 
    CheckIn: {screen: CheckInStack,}, 
}, {mode: 'modal', headerMode: 'none'}); 

const prevGetCheckInStateForAction = SiteStack.router.getStateForAction; 

SiteStack.router = { 
    ...SiteStack.router, 
    getStateForAction(action, state) { 
     if(state && action.type === "DISMISS_MODAL") { 

      console.log('in router'); 

      const routes = state.routes.slice(); 
      routes.pop(); 
      return { 
       ...state, 
       routes, 
       index: routes.length -1, 
      } 
     } 
     return prevGetCheckInStateForAction(action, state); 
    } 
}; 

在我screen.js文件：

componentDidMount() { 

     const {profile} = this.props.auth; 

     var channel = pusher.subscribe('private-user.' + profile.id); 

     channel.bind('App\\Events\\Order\\SiteHasAnsweredCheckIn', event => { 

      // this.props.navigation.dispatch(NavigationActions.back()); => this is where the back actions is launched. nowhere else. 

      //CUSTOM ACTION DISPATCH 
      this.props.navigation.dispatch({ 
       type: 'DISMISS_MODAL' 
      }); 

     }); 
} 

Answer 1

找到了解決辦法在這裏：https://github.com/react-community/react-navigation/issues/686

從richardfickling GitHub上。

在我router.js，我創建了一個DismissableStackNavigator如下：

import React, { Component } from 'react'; 
import { StackNavigator } from 'react-navigation'; 
export default function DismissableStackNavigator(routes, options) { 
    const StackNav = StackNavigator(routes, options); 

    return class DismissableStackNav extends Component { 
    static router = StackNav.router; 

    render() { 
     const { state, goBack } = this.props.navigation; 
     const nav = { 
     ...this.props.navigation, 
     dismiss:() => goBack(state.key), 
     }; 
     return (
     <StackNav 
      navigation={nav} 
     /> 
    ); 
    } 
    } 
}; 

然後我簽入堆棧如下：

const CheckInStack = DismissableStackNavigator({ 
    CheckIn: { 
     screen: CheckIn, 
     navigationOptions: { 
      header: null, 
      headerLeft: null, 
      gesturesEnabled: false, 
     } 
    } 
}); 
export const SiteStack = StackNavigator({ 
    Site: { 
     screen: Site, 
     navigationOptions: { 
      header: null, 
      headerLeft: null, 
      gesturesEnabled: false, 
     } 
    }, 
    CheckIn: {screen: CheckInStack,}, 
}, {mode: 'modal', headerMode: 'none'}); 

然後在我的CheckIn屏幕：

componentDidMount() { 

    const {profile} = this.props.auth; 

    var channel = pusher.subscribe('private-user.' + profile.id); 

    channel.bind('App\\Events\\Order\\SiteHasAnsweredCheckIn', event => { 

     //method coming from the Dismissable Navigator stack 
     this.props.navigation.dismiss(); 

    }); 
} 

Answer 2

我不知道這是否會解決你的問題，但你可以嘗試使用goBack方法而不是分派後退操作。就像這樣： this.props.navigation.goBack()