react-navigation:导航到相同的RouteName但使用不同的参数
问题描述:
我想导航到同一个屏幕但使用不同的参数。 所以想象react-navigation:导航到相同的RouteName但使用不同的参数
- 导航到
MyRouteName
- 此屏幕上点击一个按钮,应导航我
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',
}),
},
});
(自选定义它自己的头)
答
您可以使用StackNavigator的抽屉里和导航像一个正常的StackNavigator。
const MyDrawer = DrawerNavigator({
MyRouteName: {
screen: StackNavigator({
DrillDown: {
screen: MyScreen
}
}),
},
});
export default MyDrawer;
你能从你的导航器发布一个片段吗?你使用堆栈还是Tab Navigator? – bennygenel
@bennygenel我更新了更多的代码。 –