後退按鈕重定向到登錄屏幕

Question

我使用react-native-router-flux作爲我的導航器。我面臨的問題可能很簡單，但我似乎無法把頭腦放進去。當用戶登錄到應用程序時，他/她將被重定向到主儀表板場景。從那裏，如果用戶按下了安卓後退按鈕，應用程序應邏輯關閉，而不是再次導航回登錄屏幕，但我無法掌握實現此目的的缺失邏輯。

路由器：

import React, { Component } from 'react' 
import { 
    TouchableOpacity 
} from 'react-native' 
import { Scene, Router, Actions } from 'react-native-router-flux' 
import Login from '../pages/login' 
import Dashboard from '../pages/dashboard' 
import NavigationDrawer from './navigationDrawer' 
import Icon from 'react-native-vector-icons/MaterialIcons'; 

const Menu =() => { 
    return(
    <TouchableOpacity 
     onPress={() => Actions.refresh({key: 'drawer', open: value => !value }) }> 
     <Icon 
     name="view-headline" 
     size={30} 
     color="white" 
     /> 
    </TouchableOpacity> 
) 
} 

class NavigationRouter extends Component { 

    render() { 
    return(
     <Router> 
     <Scene initial key="login" component={Login} hideNavBar/> 
     <Scene key="drawer" component={NavigationDrawer} open={false} > 
      <Scene key="main"> 
      <Scene initial key="dashboard" title="Dashboard" navigationBarStyle={Styles.navigationBarStyle} component={Dashboard} hideNavBar={false} 
       renderLeftButton={() => (<Menu/>)} /> 
      </Scene> 
     </Scene> 
     </Router> 
    ) 
    } 
} 

const Styles = { 
    navigationBarStyle: { 
    backgroundColor: "#fda21d" 
    } 
} 
export default NavigationRouter; 

儀表板場景：

import React, {Component} from 'react' 
import { 
    View, 
    Text, 
    BackAndroid 
} from 'react-native' 
import {Actions} from 'react-native-router-flux' 
import Icon from 'react-native-vector-icons/MaterialIcons' 

class Dashboard extends Component { 
    constructor(props) { 
    super(props) 
    BackAndroid.addEventListener('hardwareBackPress', function() { 
     if (this.props.title === 'Dashboard') { 
     console.log("pressed"); 
     } 
    }) 
    } 
    render() { 
     [...] 
    } 

我嘗試使用BackAndroid API，Facebook的提供，但它也根本不工作。

Answer 1

這是我在我的應用程序中使用redux做的。

componentWillMount() { 
    BackAndroid.addEventListener('hardwareBackPress', this._backAndroid); 
} 

componentWillUnMount() { 
    BackAndroid.removeEventListener('hardwareBackPress', this._backAndroid); 
} 

_backAndroid =() => { 
    if (this.props.scene !== "home") { 
    try { 
     Actions.pop(); 
     return true; 
    } catch(err) { 
     return false; // exit app without prompt 
    } 
    } 

    Alert.alert(
    'Exit', 
    'Are you sure you want to exit?', 
    [ 
     { text: 'Cancel', onPress:() => {} }, 
     { text: 'Yes', onPress:() => {BackAndroid.exitApp()}}, 
    ] 
); 
    return true; 
} 

我減速

import { ActionConst } from 'react-native-router-flux'; 

const initialState = { 
    scene: {}, 
}; 

export default function reducer(state = initialState, action = {}) { 
    switch (action.type) { 
    // focus action is dispatched when a new screen comes into focus 
    case ActionConst.FOCUS: 
     return { 
     ...state, 
     scene: action.scene.name, 
     }; 
    default: 
     return state; 
    } 
} 

Answer 2

原因，我回答我的問題，即使Vinayr的一個被標記爲正確只是因爲我寫了一個稍微有點不同（無終極版）。

在我的導航路由器中，我添加了接受答案中提到的reducer函數，我也在那裏添加了BackAndroid函數。

代碼：

const reducerCreate = params => { 
    const defaultReducer = Reducer(params); 
    return (state, action) => { 
     switch (action.type) { 
      case ActionConst.FOCUS: 
      if (action.scene.name === "dashboard") { 
       BackAndroid.addEventListener('hardwareBackPress', function() { 
       return BackAndroid.exitApp() 
       }) 
      } 
      break; 
      default: 
      return; 
     } 
     return defaultReducer(state, action); 
    } 
}; 

class NavigationRouter extends Component { 

    render() { 
    return(
     <Router createReducer={reducerCreate}> 
     [...] 
    }