I’m a beginner in React-Native, I was wondering how can I add a Toptabnavigator within my code

Question

I’ve seen several videos , but could not make an adaptation to my code

import {StyleSheet,ScrollView, SafeAreaView  } from 'react-native';
import {createDrawerNavigator , DrawerItems} from 'react-navigation'

import Home from './Home'
import Settings from './src/screens/Settings'

import Main from './tabScreen/Main'
import Promotions from './tabScreen/Promotions'
import Shirt from './tabScreen/Shirt'



export default class App extends Component {
  render () {
    return (

      <AppDrawerNavigator/>


    )
  }
}

const CustomDrawerComponent = (props) => (
  <SafeAreaView>
    <ScrollView>

        <DrawerItems {...props}/>


    </ScrollView>
  </SafeAreaView>
)

const AppDrawerNavigator = createDrawerNavigator({

  Home: {
    screen: Home,
    navigationOptions: {title: 'Home' }
  },
  Settings: {
    screen: Settings,
    navigationOptions: {title: 'Settings'},
  },


}, {
  contentComponent: CustomDrawerComponent,
  drawerWidth:220,
  drawerBackgroundColor:'black',
  drawerPosition: "left",

  contentOptions: {
     labelStyle: {
      fontFamily: 'sans-serif-thin',
      color: 'white',
      margin:10,


    },

  }
})

const styles = StyleSheet.create({

  container: {
    flex:1,

  },

});

import React,{Component} from 'react'
import {View,Text,StyleSheet,Image} from 'react-native'

import Icon from 'react-native-vector-icons/FontAwesome'


class Home extends Component {

    render(){
        return(

            <View style={styles.container}>

                <View style={styles.header}>

                    <View style={styles.logoView}>
                        <Image style={styles.logoImg} source={require('./assets/icon.jpg')}/>
                    </View>

                    <View style={styles.cartView}>
                        <Icon name={'shopping-cart'} size={20} color='white'/>
                    </View>

                    <View style={styles.menuView}>
                        <Icon name={'bars'} size={20} color='white' onPress={()=>this.props.navigation.openDrawer()}/>
                    </View>

                </View>

                <View style={styles.tabView}>
                   <Text style={{fontSize:20}}>TOPTABNAVIGATOR </Text>
                </View>

                <View style={styles.main}>

                    <Text style={{fontSize:40}}>TELA PRINCIPAL</Text>

                </View>



            </View>
        )

    }
}

export default Home

const styles = StyleSheet.create ({
    container:{
        flex:1,
        flexDirection:'column'
    },

     header: {
        left:0,
        right:0,
        top:0,
        height:70,
        backgroundColor:'black',
        justifyContent:'center',
        alignItems:'center',
    },

    logoImg: {
        width:80,
        height:35,
      },

    cartView: {
        position:'absolute',
        right:20
    },

    logoView: {
        position:'absolute',
    },

    menuView: {
        position:'absolute',
        left:20
    },

    tabView: {
        flex:0.8,
        flexDirection:'row',
        alignItems:'center',
        justifyContent:'center',
        backgroundColor:'white'


    },
    text: {
        fontSize:15,
        margin:15,
        color:'white',
    },

    main: {
        flex:8,
        backgroundColor:'green',
        alignItems:'center',
        justifyContent:'center'
    }
})