如何在React Native中使用包装视图嵌套导航器

Question

我想在我的DrawerNavigator和TabNavigator之间建立一个嵌套视图，但是无法正常工作。

码：

const SubNavigation = TabNavigator({
  SubOne: { screen: SubOne },
  SubTwo: { screen: SubTwo },
}, {
  tabBarComponent: TabBarTop,
  tabBarPosition: 'top',
  initialRouteName: 'SubOne',
});

class SubScreen extends Component {
  static navigationOptions = {
    title: 'Subscreen',
  };

  render() {
    const { navigation } = this.props;
    return (
      <View>
        <Header navigation={navigation} />
        <SubNavigation navigation={navigation} />
      </View>
    );
  }
}

const PrimaryNav = DrawerNavigator({
  StartScreen: { screen: StartScreen },
  SubScreen: { screen: SubScreen },
}, {
  initialRouteName: 'StartScreen',
});

我这样做是因为我想要每个PrimaryNav屏幕的自定义标题。我真的不知道这是否是最佳实践，我习惯于使用react-router在这里定义类似的容器组件。

我收到上述Cannot read property 'forEach' of undefined代码的错误。

Answer 1

使用redux，react-native和react-navigation时，我遇到了同样的问题。

调试反应导航后TabRouter里面的TabNavigator，这个问题归结到这行代码

由于在层次结构中包装了一个（StackNavigator/ TabNavigator（aka a NavigationContainer）组件，因此路由无法正确连接起来……除非您需要一点额外的帮助。

在screen较高的Stack / TabNavigator的RouteConfig 引用的包装器组件中，您需要提供对NavigationContainer要包装的路由器的引用。用英语解释比用代码解释更复杂，因此这是一个示例，说明我如何大致使用包装器进行导航。

//Landing.js - the top most component of the app
const LandingNav = StackNavigator(
  {
    LoggedInTabs: {
      screen: LoggedInTabs
    },
    LoggedOut: {
      screen: LoggedOut
    }
  },
  {
    initialRouteName: 'LoggedInTabs',
  }
})

class Landing extends React.Component {
  render() {
    <LandingNav
      navigation={
        addNavigationHelpers({
          dispatch: this.props.dispatch,
          state: this.props.nav
        })
      }/>
  }
}

const mapStateToProps = (state) => {
  const nav = state.nav;
  return {
    //...,
    nav
  };
};
export default connect(mapStateToProps, null)(Landing);



//LoggedInTabs.js

const TabsNav = TabNavigator(
{
  Home: {
    screen: Home
  },
  Notifications: {
    screen: Notifications
  },
  Friends: {
    screen: Friends
  },
  Me: {
    screen: Me
  }
});

export default class LoggedInTabs extends React.Component {

  //THIS property is what I was missing, this is key!!
  static router = TabsNav.router;

  render() {
    return (
      <View style={{flex: 1}}>
        {
          //...Put in whatever you need to wrap here.
        }
        <TabsNav
          navigation={props.navigation}/>
        {
          // ^ This is also very key for wrapping. This also caused some pain for me earlier.
        }
      </View>
    )
  }
}