React Native反应导航redux手柄Android后退按钮

Question

当我使用与redux集成的反馈导航时，我正在关注尝试处理Android后退按钮的文档。

无论您按哪个按钮，当前按下后退按钮都会退出整个应用程序。我试图通过在Root组件上添加处理程序来按照指南处理后退：

 const persistConfig = {
      key: 'root',
      storage,
      blacklist: ['nav'],
    };

    const AppNavigator = createStackNavigator(
      {
        SelectScreen,
        PageScreen,
        SettingsScreen,
      },
      {
        initialRouteName: 'SelectScreen',
      },
    );

    const navReducer = createNavigationReducer(AppNavigator);
    const appReducer = combineReducers({
      nav: navReducer,
      theme: themeReducer,
      page: pageReducer,
    });
    const persistedReducer = persistReducer(persistConfig, appReducer);

    const middleware = createReactNavigationReduxMiddleware('root', state => state.nav);

    const App = reduxifyNavigator(AppNavigator, 'root');
    const mapStateToProps = state => ({
      state: state.nav,
    });
    const AppWithNavigationState = connect(mapStateToProps)(App);

    const store = createStore(persistedReducer, applyMiddleware(middleware));
    const persistor = persistStore(store);

    class Root extends React.Component {

componentDidMount() {
    BackHandler.addEventListener("hardwareBackPress", this.onBackPress);
  }

  componentWillUnmount() {
    BackHandler.removeEventListener("hardwareBackPress", this.onBackPress);
  }

  onBackPress = () => {
    const { dispatch, nav } = this.props;
    if (nav.index === 0) {
      return false;
    }

    dispatch(NavigationActions.back());
    return true;
  };
      render() {
        return (
          <Provider store={store}>
            <PersistGate loading={null} persistor={persistor}>
              <AppWithNavigationState />
            </PersistGate>
          </Provider>
        );
      }
    }

    AppRegistry.registerComponent(appName, () => Root);

但是，我收到错误，因为根组件中不存在导航道具。我知道这可能是一个错误，因为我缺乏理解，所以我真的很感激如何使这个工作得到一些帮助！

谢谢

Answer 1

您可以将它传递给另一个有权访问Provider store的组件。

AppNavigation.js

const PrimaryNav = createStackNavigator(
      {
        SelectScreen,
        PageScreen,
        SettingsScreen,
      },
      {
        initialRouteName: 'SelectScreen',
      },
 );

export const appNavigatorMiddleware = createReactNavigationReduxMiddleware(
  'root',
  state => state.nav
); //... Import it to your configure store file, to apply the middleware

const AppNavigator = reduxifyNavigator(PrimaryNav, 'root');

export default AppNavigator

ReduxNavigation.js

import React from 'react'
import { BackHandler, Platform } from 'react-native'
import { connect } from 'react-redux'
import AppNavigation from './AppNavigation' //... Import from AppNavigation.js

class ReduxNavigation extends React.Component {
  ...// Add your BackHandler Code here

  render () {
    return <AppNavigation state={this.props.nav}  dispatch={this.props.dispatch}/>
  }
}

const mapStateToProps = state => ({ nav: state.nav })
export default connect(mapStateToProps)(ReduxNavigation)

App.js

class App extends Component {
  render () {
    return (
      <Provider store={store}>
        <PersistGate loading={null} persistor={persistor}>
         <RootContainer />
        </PersistGate>
      </Provider>
    )
  }
}

Answer 2

因为我没有足够的代表我必须发布这个作为答案。

请仔细阅读：

https://reactnavigation.org/docs/en/custom-android-back-button-handling.html

看看这个例子，但是看一下构造函数中的监听器：

this._didFocusSubscription = props.navigation.addListener('didFocus', payload =>
  BackHandler.addEventListener('hardwareBackPress', this.onBackButtonPressAndroid)
);

看起来你走在正确的轨道上，你只需要将监听器添加到props.navigation