javascript - I want to put a materialTopTabNavigator under the header echo with navigationOptions of a stack

Question

I want to put the buttons under the header that I have made with the stack, but I can not think of how I leave a part of the code of how I have done it.

//stacks

import React from "react";
import { connect } from "react-redux";
import { createStackNavigator } from "react-navigation";
import ScreenAutoridades from "../../views/autoridades/ScreenAutoridades";
import DetallesAutoridades from "../../views/autoridades/autoridades/Components/DetallesAutoridades";
import AutoridadesList from "../../views/autoridades/autoridades/Components/AutoridadesList";
import ButtonMenu from "../components/ButtonMenu";
import ButtonHome from "../components/ButtonHome";
import { defaultNavigationOptions } from "../components/stylesNavigations";

let AutoridadesRedux = connect(state => ({
  autoridades: state.autoridades
}))(ScreenAutoridades);

const AutoridadesStack = createStackNavigator(
  {
    AUTORIDADES: {
      screen: AutoridadesRedux,
      navigationOptions: ({ navigation }) => {
        return {
          headerLeft: <ButtonMenu navigation={navigation} />,
          headerRight: <ButtonHome navigation={navigation} />
        };
      }
    },
    AutoridadesList: {
      screen: AutoridadesList
    },
    DetalleAutoridades: {
      screen: DetallesAutoridades
    }
  },
  {
    defaultNavigationOptions
  }
);
export { AutoridadesStack };

//Drawer

    const DrawerNavigator = createDrawerNavigator(
  {
    Diputados: { screen: DiputadosStack },
    Bloques: { screen: BloquesStack },
    Interbloques: { screen: InterBloquesStack },
    Comisiones: { screen: ComisionesStack },
    Autoridades: { screen: AutoridadesStack },
    "Sesion En Vivo": { screen: SesionEnVivoStack },
    "Diputados TV": { screen: DiputadosTVStack },
    "Reglamentos HCDN": { screen: PDFReglamentosStack }
  },
  {
    contentComponent: CustomDrawerContentComponent,
    drawerWidth: width / 2,
    contentOptions: {
      activeTintColor: white,
      activeBackgroundColor: Gris_Drawer,
      inactiveTintColor: "rgb(105,105,104)",
      itemsContainerStyle: {
        textAlign: "center"
      },
      labelStyle: {
        fontFamily: "RobotoCondensed-Regular",
        fontWeight: "100",
        fontSize: 17,
        marginTop: 8,
        marginLeft: 10
      }
    },
    iconContainerStyle: {
      opacity: 1
    }
  }
);

I just want to add the createMaterialTopTabNavigator below the header made with the createStackNavigator. What I did was put a createMaterialTopTabNavigator but at the time of adding the stacks inside I stayed up the createMaterialTopTabNavigator and below I had the navigation of the stack

标签： javascriptreact-native

Answer 1

You can use a navigator for a screen in creating any navigator.

For example:

import {
  createMaterialTopTabNavigator,
  createStackNavigator
} from 'react-navigation'
import MyComponent from '../some-component-folder/'
import MyHomeComponent from '../some-component-folder/'
import MyNavigator from '../some-navigator-folder/'

const TabNavigator = createMaterialTopTabNavigator(
  {
    Tab1: { screen: MyComponent }
    Tab2: { screen: MyNavigator }
  }
)

const StackNavigator = createStackNavigator(
  {
    Screen1: { screen: MyHomeComponent }
    Screen2: { screen: TabNavigator }
  }
)