react-navigation:导航到相同的RouteName但使用不同的参数

问题描述:

我想导航到同一个屏幕但使用不同的参数。 所以想象react-navigation:导航到相同的RouteName但使用不同的参数

  1. 导航到MyRouteName
  2. 此屏幕上点击一个按钮,应导航我MyRouteName,但不同的PARAMS。

目前我已经试过
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问题都没有提供明确的指导。

我该如何做到这一点?


更新:响应于以下

评论我使用了一个堆叠导航作为我的根,基于

// 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 
    //.. 
} 

我最终实现这导致了DrawerNavigator在@ benneygenel的答案如下。

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

(自选定义它自己的头)

+0

你能从你的导航器发布一个片段吗?你使用堆栈还是Tab Navigator? – bennygenel

+0

@bennygenel我更新了更多的代码。 –

您可以使用StackNavigator的抽屉里和导航像一个正常的StackNavigator。

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