react-navigation：导航到相同的 RouteName 但具有不同的参数

Question

我想导航到同一屏幕，但参数不同。 想象一下

1. 导航到 MyRouteName
2. 在此屏幕上单击一个按钮，该按钮应将我导航至 MyRouteName，但具有不同的参数。

目前我已经试过了
this.props.navigation.navigate('MyRouteName', {param1: 'new val'})
和

const setParamsAction = NavigationActions.setParams({
      params: { param1: 'new val'},
      key: 'mrn-new_val',
    })
this.props.navigation.dispatch(setParamsAction)

都不行。我发现的文档和 github 问题都没有对此提供明确的指导。

我该如何完成？

---

更新：回应下面的评论

我使用堆叠式导航器作为我的根，这导致 DrawerNavigator

// MyDrawer.js
// ...
const MyDrawer = DrawerNavigator(
  {
    MyRouteName: {
      screen: MyScreen,    
    },    
  },
  {
    initialRouteName: 'MyRouteName',    
    contentOptions: {
      activeTintColor: '#e91e63',
    },
    contentComponent: props => <DrawerScreen {...props}/>,
  }
);
export default MyDrawer;



// MyScreen.js
class MyScreen extends React.Component{
    //..
    //.. stuff goes here
    //..
    drillDown(newVal){      
        const setParamsAction = NavigationActions.setParams({
          params: { param1: newVal },
          key: 'ms-${newVal}',
        })
        this.props.navigation.dispatch(setParamsAction)
    }
    //..
    //.. more stuff
    //..
}

---

我的最终实现基于下面@benneygenel 的回答。

const MyDrawer = DrawerNavigator({
    MyRouteName: {
      screen: StackNavigator({
        DrillDown:{
          screen: MyScreen,
        },
      }, {
        headerMode: 'none',
      }),
    },
});

(MyScreen 定义它自己的header)

Answer 1

您可以在抽屉内使用 StackNavigator 并像普通 StackNavigator 一样导航。

const MyDrawer = DrawerNavigator({
  MyRouteName: {
    screen: StackNavigator({
      DrillDown: { 
        screen: MyScreen
      }
    }),    
  },
});
export default MyDrawer;