从孩子到特定父母的反应导航答案

【问题标题】：React-Navigation back from child to specific parent从孩子到特定父母的反应导航
【发布时间】：2018-07-07 19:13:40
【问题描述】：

我正在开发项目，使用 react-navigation 和 redux。问题是当我在 DrawerNav（主页）上并转到 PatientRecordNavigation -> 菜单时，但是当按下后退按钮时，该操作不会从 PatientRecordNavigation（菜单）返回到 -> Home，而是返回到 ChooseAnimal，我没有不想去ChooseAnimal，但需要去主页（就像在浏览器历史上一样，总是回到上一个导航）。位于 header 上的后退按钮，具有对 reducer 的调度功能

const DrawerNav = DrawerNavigator({
    Home: {screen: Home},
    Records: { screen: PatientRecordNavigation }
},
{
  initialRouteName: "Home"
});

const PatientRecordNavigation = StackNavigator(
{
    ChooseAnimal: { screen: ChooseAnimal },
    Menu: { screen:Menu },
    Reminders: { screen: Reminders }   
},
{
    initialRouteName: "ChooseAnimal",
    headerMode: 'none'
});

导航减速器的一部分

 case 'BACK':
        nextState = AppNavigator.router.getStateForAction(NavigationActions.back(), state);
    break;

请帮忙解决这个问题。谢谢

【问题讨论】：

标签： reactjs react-native react-redux react-navigation

【解决方案1】：

尝试将key 添加到NavigationActions.back()，如here 所述。可以在导航状态下获取当前视图的key。如果这不起作用，请尝试传递{key: null}。

【讨论】：

不行，还是回到ChooseAnimal而不是主菜单。

【解决方案2】：

在你的减速器中，有一个Menu 的箱子。为Menu配置按下后退按钮的动作。

case 'MENU':
    nextState = AppNavigator.router.getStateForAction(
            NavigationActions.navigate({ routeName: Screens.Menu})
        );
break;

返回按钮配置

import { BackHandler } from 'react-native'
 ...
 ...

 componentWillMount() {
    this.backButtonListener = BackHandler.addEventListener('hardwareBackPress', () => {
        this.context.props.navigation.dispatch({ type: 'MENU' });
        return true;
    }); 
}

 componentWillUnmount() {
    this.backButtonListener.remove();
}

希望对你有帮助

【讨论】：

【解决方案3】：

我通过在 reducer 上添加类型解决了这条任意路线。当我来自 Home -> Menu 时，我打电话给 RECORD_HOME 当我来自 ChooseAnimal -> Menu 时，我调用 RECORD

所以，解决方案是使用导航重置，当我不返回选择动物时，我将更改（使用重置功能）初始路由名称

示例代码：

const initialState = AppNavigator.router.getStateForAction(
   NavigationActions.init()
);
const navReducer = (state = initialState, action) => {
     let nextState;
     switch(action.type){
        case 'RECORD_HOME':
          nextState = changeInitialRoute('Menu', state, {animal: action.payload, parentKey: state.key})
        break;
        case 'RECORD':
          nextState = defineRoute('Menu', state, {animal: action.payload, parentKey: state.key})
        break;
        default:
          nextState = AppNavigator.router.getStateForAction(action, state)
        break;
     }
    return nextState || state;
}

const changeInitialRoute = (routeName, state, params = null) =>{
   let action = NavigationActions.reset({
      index:0,
      actions:[NavigationActions.navigate({routeName: routeName, params: params})]
    })
   return(
    AppNavigator.router.getStateForAction(action, state)
   );
 }

 const defineRoute = (routeName, state, params = null) =>{
  let action = NavigationActions.navigate({ 
    routeName: routeName,
    params: params
  });
  return(
    AppNavigator.router.getStateForAction(action, state)
  );
}

【讨论】：