React Native:将道具传递给嵌套导航 [英] React Native: Passing props to nested navigation

问题描述

我使用的是光滑的React Navigation，并遵循嵌套导航食谱，但是我不知道如何将"this"传递给我的导航.抱歉，我的无知.

I'm using the slick React Navigation and following the nested navigation recipe here, but i don't know how to pass 'this' to my navigation. Sorry for my ignorance.

这是我的总体结构概述:

Here is my general structure outline:

class MyApp extends Component {
  render() {
    return (
      <StackNavigation
        screenProps={this.state}
      />
    )
  }
}

const MainScreenNavigator = TabNavigator(
  {
    Awesome: { screen: Awesome } // How do I pass this.state?
  }
)

const routesConfig = {
  Home: { screen: MainScreenNavigator },
  Profile: { screen: Profile }
}

const StackNavigation = StackNavigator(routesConfig, {initialRouteName: 'Home'})

那么如何将this.state传递给MainScreenNavigator?

So how do I pass this.state to my MainScreenNavigator?

推荐答案

根据此，您可以在StackNavigatorConfig中将其他选项传递给StackNavigator.像这样:

According to this, you can pass an extra option to the StackNavigator in the StackNavigatorConfig. Something like this:

const StackNavigation = StackNavigator(routesConfig, StackNavigatorConfig)

...，其中StackNavigatorConfig是类似这样的对象:

... where the StackNavigatorConfig is an object like:

{ initialRouteName: 'Home', initialRouteParams: {...this.state} }

这会将您的所有状态传递到导航器的初始路线.

And that is gonna pass all your state to the initial route of your navigator.

对于任何其他路线，您可以执行以下操作:

For any other route you can do:

this.props.navigation.navigate('SomeScreen', {<the-greatest-object-for-pass-down>})

这将把最大的对象传递传递给 SomeScreen .

最后，您可以使用this.props.navigation.params来同时访问两者(初始屏幕和任何其他屏幕)的参数.

Finally, you can access to that params for both (the initial and any other screen) with this.props.navigation.params.

这篇关于React Native:将道具传递给嵌套导航的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！