如何使用環繞嵌套導航器在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> 
    ) 
    } 
}