1

我正在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，但它也根本不起作用。

4

2 回答 2

0

这就是我在我的应用程序中使用 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;
  }
}
于 2016-11-10T08:02:31.390 回答
0

即使 Vinayr 的问题被标记为正确，我也回答我的问题只是因为我写的有点不同（没有 Redux）。

在我的导航路由器中，我添加了一个在接受的答案中提到的减速器功能，我还在那里添加了 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}>
      [...]
  }
于 2016-11-10T11:18:48.670 回答