戻るボタンはログイン画面にリダイレクト

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

私はFacebookが提供BackAndroidのAPIを使用してみましたが、それはまた、全く機能していません。

Answer 1

これは私がreduxを使って私のアプリでした方法です。私は（Reduxのなしで）少しビット違っそれを書いたので、私はVinayrの1が正しいものとしてマークされているにもかかわらず、私の質問に答えています

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

理由だけです。

私のナビゲーションルーターでは、受け入れられた回答に記載されているように減速機能を追加しました。そこに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}> 
     [...] 
    }