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

Question

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

路由器：

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() {
      [...]
  }

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

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的一個被標記為正確只是因為我寫得有點不同（沒有Redux）。

在我的導航路由器中，我添加了一個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}>
      [...]
  }