【问题标题】:React Navigation pass params to nested stackNavigatorReact Navigation 将参数传递给嵌套的 stackNavigator
【发布时间】:2019-04-28 05:52:43
【问题描述】:

在 React Navigation 3.0 中,他们添加了将默认参数传递到屏幕的功能。问题是我想将这些参数传递给嵌套的 stackNavigator,但我不知道该怎么做。 这些是我的导航器: MainDrawer.js:

    const MyDrawerNavigator = createDrawerNavigator({
      Anime: {
        screen: SerieNavigation,
        params: { type: "anime" },
        path: "anime/:anime"
      },
      Tv: {
        screen: SerieNavigation,
        params: { type: "tv-show" },
        path: "tv/:tv"
      },
      Film: {
        screen: SerieNavigation,
        params: { type: "film" },
        path: "film/:film"
      }
    });

    const AppContainer = createAppContainer(MyDrawerNavigator);

    export default AppContainer;

SerieNavigation.js:

    const SerieStack = createStackNavigator(
      {
        Content: {
          screen: SearchScreen,
          params: { type: "anime" } //<-- HERE I WOULD LIKE TO DO SO params: { type: props.navigation.state.params.type }
        },
        Serie: SearieScreen,
        Episode: EpisodePage
      },
      {
        headerMode: "none",
        navigationOptions: {
          headerVisible: false
        }
      }
    );

    SerieStack.defaultNavigationOptions = {};
    export default SerieStack;

感谢任何帮助。

【问题讨论】:

    标签: react-native react-navigation expo stack-navigator


    【解决方案1】:

    要访问父母的道具,您可以使用this.props.navigation.dangerouslyGetParent().getParam('type'); 现在您可以访问父级的任何道具。

    编辑:

    不确定这是否适用于 react-navigation v5,但请尝试一下

    【讨论】:

    • 父母是什么意思?
    • 我有一个导航器,里面有一个导航器,但是道具没有通过导航器,所以要访问道具你需要引用父级(顶部的导航器)
    • 是的,如果我有两个 AppContainer 如何从另一个屏幕中的其他 AppContainer @LeonardoDrici 获取参数,我知道了
    • 你能避免危险的GetParent吗?通过某种方式从堆栈导航器传递参数也许?
    • 我从另一个堆栈调度的堆栈调用这个函数!这对我有帮助!谢谢! “+1”
    【解决方案2】:

    我相信您可以通过将 screenProps 传递给 stackNavigator 来实现这一点。 像这样(假设您在某处返回堆栈导航器):

    render() {
      <MyDrawerNavigator screenProps={this.props} />
    }
    

    然后,您可以像这样在 SerieStack 中访问它:

    const SerieStack = createStackNavigator(
    {
      Content: {
        screen: SearchScreen,
        params: { type: this.props.screenProps.navigation.state.params.type }
      }
    });
    

    【讨论】:

    • 我不渲染stackNavigator 我直接将它作为屏幕传递给drawerNavigator
    • 是一样的,你把props传给drawerNavigator,我来编辑答案
    • 看看我前几天问的这个问题,我也有同样的问题:stackoverflow.com/questions/53422419/…
    • 像你说的那样做会让我的组件渲染相同的对象。如果您可以看到所有三个屏幕都呈现相同的组件,但根据参数,它会呈现不同的结果。通过执行您提供的操作,所有三个屏幕都将呈现相同的内容。
    • 您将从您的 HOC 传递主要道具,然后您可以将它们以不同的方式发送到您的每个屏幕
    猜你喜欢
    • 2022-11-11
    • 2021-12-02
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2020-07-27
    • 1970-01-01
    • 2020-05-27
    • 1970-01-01
    相关资源
    最近更新 更多