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后，问题归结为this line of code

由于在您的层次结构深处包裹StackNavigator / TabNavigator（也称为NavigationContainer）组件，路由无法正确连接...除非您需要提供它有点额外的帮助。

在由较高的Stack / TabNavigator的RouteConfig引用为screen的包装器组件中，您需要提供对您正在包装的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>
    )
  }
}

如何嵌套导航器与React本机包装视图

1 个答案: