如何使用环绕嵌套导航器在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内部之后，这个问题归结为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> 
    ) 
    } 
}