Android 后退按钮重定向到登录屏幕

我使用

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;

---

我尝试使用Facebook提供的BackAndroid API，但它也完全不起作用。

这就是我在应用程序中使用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;
  }
}

---

这就是我在应用程序中使用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;
  }
}

---

尽管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}>
      [...]
  }

const reducerCreate=params=>{
const defaultReducer=减速机（参数）；
返回（状态、操作）=>{
开关（动作类型）{
案例ActionConst.FOCUS：
如果（action.scene.name==“dashboard”）{
BackAndroid.addEventListener（'hardwareBackPress'，function（）{
返回BackAndroid.exitApp（）
})
}
打破
违约：
返回；
}
返回defaultReducer（状态、动作）；
}
};
类NavigationRouter扩展组件{
render（）{
返回(
[...]
}

尽管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}>
      [...]
  }

const reducerCreate=params=>{
const defaultReducer=减速机（参数）；
返回（状态、操作）=>{
开关（动作类型）{
案例ActionConst.FOCUS：
如果（action.scene.name==“dashboard”）{
BackAndroid.addEventListener（'hardwareBackPress'，function（）{
返回BackAndroid.exitApp（）
})
}
打破
违约：
返回；
}
返回defaultReducer（状态、动作）；
}
};
类NavigationRouter扩展组件{
render（）{
返回(
[...]
}

我决定不在这个应用程序上使用Redux，因为这个应用程序没有那么复杂。没有Redux我可以实现吗？你可以用自己的减速机代替Redux，如本例所示。但我不确定这是否解决了你的问题。当我试着检查props.title==“dashboard”时我没有定义。似乎BackAndroid API会触发，然后执行我编写的代码。这就是为什么使用redux来识别当前场景的原因之一。我决定不在这个应用程序上使用redux，因为这个应用程序没有那么复杂。没有redux我可以实现吗？你可以使用自己的redux来代替redux，如本例所示。但我不确定这是否解决了您的问题。当我尝试检查props.title是否为“dashboard”我没有定义。似乎BackAndroid API会触发，然后执行我编写的代码。这就是为什么使用redux来识别当前场景的原因之一。我认为简单的解决方案是使用重置类型的

操作
尝试登录成功后的
操作.drawer（{type:'reset'}）
。我认为简单的解决方法是将
操作
与重置类型一起使用。登录成功后，尝试
操作。抽屉（{type:'reset'}）；
。