TabNavigation/난 그냥 StackNavigation 내부 TabNavigation 또는 DrawerNavigation을 가질 수있는 방법을 정확히 알아낼 수 없습니다

Question

StackNavigation에서 DrawerNavigation (그런 일) : 문서에서 그래서

나는이있는 경우 : 제가 적용해야

import React from 'react'; 
import { 
    AppRegistry, 
    Text, 
    View, 
} from 'react-native'; 

import { 
    createRouter, 
    NavigationProvider, 
    StackNavigation, 
} from '@exponent/ex-navigation'; 

const Router = createRouter(() => ({ 
    home:() => HomeScreen, 
})); 

class App extends React.Component { 
    render() { 
    return (
     <NavigationProvider router={Router}> 
     <StackNavigation initialRoute={Router.getRoute('home')} /> 
     </NavigationProvider> 
    ); 
    } 
} 

class HomeScreen extends React.Component { 
    static route = { 
    navigationBar: { 
     title: 'Home', 
    } 
    } 

    render() { 
    return (
     <View style={{alignItems: 'center', justifyContent: 'center', flex: 1}}> 
     <Text>HomeScreen!</Text> 
     </View> 
    ) 
    } 
} 


AppRegistry.registerComponent('main',() => App); 

은/서랍/TabNavigation을 추가하는 방법에 대한 문서에서 다시 코드의이 조각을 삽입 :

import { 
    StackNavigation, 
    DrawerNavigation, 
    DrawerNavigationItem, 
} from '@exponent/ex-navigation'; 

// Treat the DrawerNavigationLayout route like any other route -- you may want to set 
// it as the intiial route for a top-level StackNavigation 

class DrawerNavigationLayout extends React.Component { 
    static route = { 
    navigationBar: { 
     visible: false, 
    } 
    }; 

    render() { 
    return (
     <DrawerNavigation 
     id='main' 
     initialItem='home' 
     drawerWidth={300} 
     renderHeader={this._renderHeader} 
     > 
     <DrawerNavigationItem 
      id='home' 
      selectedStyle={styles.selectedItemStyle} 
      renderTitle={isSelected => this._renderTitle('Home', isSelected)} 
     > 
      <StackNavigation 
      id='home' 
      initialRoute={Router.getRoute('home')} 
      /> 
     </DrawerNavigationItem> 

     <DrawerNavigationItem 
      id='about' 
      selectedStyle={styles.selectedItemStyle} 
      renderTitle={isSelected => this._renderTitle('About', isSelected)} 
     > 
      <StackNavigation 
      id='about' 
      initialRoute={Router.getRoute('about')} 
      /> 
     </DrawerNavigationItem> 

     </DrawerNavigation> 
    ); 
    } 

    _renderHeader =() => { 
    return (
     <View style={styles.header}> 
     </View> 
    ); 
    }; 

    _renderTitle(text: string, isSelected: boolean) { 
    return (
     <Text style={[styles.titleText, isSelected ? styles.selectedTitleText : {}]}> 
     {text} 
     </Text> 
    ); 
    }; 
} 

const styles = StyleSheet.create({ 
    header: { 
    height: 20 
    }, 

    selectedItemStyle: { 
    backgroundColor: 'blue' 
    }, 

    titleText: { 
    fontWeight: 'bold' 
    }, 

    selectedTitleText: { 
    color: 'white' 
    } 
}); 

어떤 도움을 주셔서 감사합니다. 고마워, 얘들 아!

Answer 1

내가 뭘 찾고 있었는지 : https://github.com/sibelius/ex-navigation-drawer-tabs