Question

我使用function plot(params){ this.append('g') .call(params.gridlines) .classed('gridline', true) .attr('transform','translate(0,0)'); this.selectAll('bar') .data(params.data) .enter() .append('rect') .classed('bar', true) .attr('x', function(d,i){ return x(d.name) }) .attr('y',function(d,i){ return y(d.carbs); }) .attr('width', function(d){ return x.rangeBand(); }) .attr('height', function(d,i){ return height - y(d.carbs) }) .style('fill',function(d,i){ return ordinal_color_scale(i); }); this.selectAll('.bar_label') .data(params.data) .enter() .append('text') .classed('bar_label', true) .attr('x', function(d,i){ return x(d.name) + (x.rangeBand()/2); }) .attr('dx', 0) .attr('y', function(d,i){ return y(d.carbs); }) .attr('dy', -6) .text(function(d){ return d.carbs; }); this.append('g') .classed('x axis', true) .style('fill', '#ffd000') .attr('transform','translate('+ 0 +','+ height +')') .call(params.axis.x) .selectAll('text') .style('text-anchor','end') .attr( 'dx', -8) .attr('dy',8) .attr('transform','translate(0,0) rotate(-45)'); this.append('g') .classed('y axis', true) .style('fill', '#ffd000') .attr('transform','translate(0,0)') .call(params.axis.y); } plot.call(chart, { data: data, axis: { x: x_axis, y: y_axis }, gridlines: y_gridlines });作为我的导航器。我面临的问题可能很简单，但我似乎无法理解它。当用户登录到应用程序时，他/她将被重定向到主仪表板场景。从那里，如果用户按下安卓后退按钮，应用程序应该逻辑关闭，而不是再次导航回登录屏幕，但我无法掌握实现此目的的缺失逻辑。

路由器：

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;

我尝试使用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}>
      [...]
  }

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

2 个答案: