首页 文章

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

提问于
浏览 次
1

我想导航到相同的屏幕，但有不同的参数 . 想象一下

  • 导航至 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问题都没有为此提供明确的指导 .

我该如何做到这一点？

Update ：回应下面的评论

我使用堆叠的导航器作为我的根，这导致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定义它自己的 Headers ）

reactjs react-native react-navigation expo

1 回答

  • 2

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

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

相关问题