Question

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

导航至MyRouteName
在此屏幕上点击一个按钮，该按钮应该导航到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定义它自己的标题）

Answer 1

您可以在Drawer中使用StackNavigator，并像普通的StackNavigator一样导航。

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

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

1 个答案: