React Native - Drawer Navigation Problems Header

Question

I’m new to React Native and I have a problem. I have an APP that uses Drawer to mount the menu. This working ok however I have the following problem.

As I have screens that open in different ways, I cannot access the screen header. Follow the Code.

    const AppDrawerNavigator = createDrawerNavigator({
    Home: {
        screen: Home,
        name: 'Home',
    },
    Login,
    Agenda,
    CentroCusto,
    ContaBancaria,
    Pagamento,
    PlanoConta,
    Recebimento,
    Receita,
    Transferencia
    },    {
        contentComponent: (props) => <SideBar {...props} />,
        drawerWidth: 250,
        initialRouteName: 'Home',
    });


const RootStack = createStackNavigator(
    {
        Main: {
            screen: AppDrawerNavigator,
        },
        Configuracoes,
        MeusDados,
        AlterarSenha,
        CentroCustoForm,
        ContaBancariaForm,
        PagamentoForm,
        PlanoContaForm,
        RecebimentoForm,
        ReceitaForm,
        TransferenciaForm
    },
    {
        mode: 'modal',
        headerMode: 'none',
    }
);

const FloatStack = createStackNavigator(
    {
        Main: {
            screen: RootStack,
        },
        ListaSelecao
    },
    {
        mode: 'float',
        headerMode: 'none',
    }
);
export default FloatStack

const AppContainer = createAppContainer(Navigator);
AppRegistry.registerComponent(appName, () => AppContainer);

These are the Navigatons but I can’t access the Header to put the titles or change the buttons. I can only do this in the Listselect because it is the last included.

I’ve changed the order, but it’s always a new problem.

What I must change?

Answer 1

as you defined the headerMode for none He won’t list it. What you could do is leave it open and set the header to null when you don’t have the header on the screen.

Ex:

const FloatStack = createStackNavigator(
    {
        Main: {
            screen: RootStack,
        },
        ListaSelecao
    },
    {
        mode: 'float',
    }
);
export default FloatStack

On the screen you do not want Header

class ClasseQueNaoTeraHeader extends Component {

  static navigationOptions = {
    header: null
  }
 ... 
}

if you are a Stateless

const MeuStatelessComponent = ({ navigation, dispatch }) => (
  ...
)
MeuStatelessComponent.navigationOptions = ({ navigation }) => {
  return {
    title: 'Titulo' ,
 }
}