English::.
Hi, i’ve a problema painting a menu and tabs for mi app, when y put de tabs this worked normaly but when i put the menu ( ) i dont see that.
Español::.
Tengo un problema, estoy intentando poner un menu desplegable y los Tbas de ionic, cuando pongo los tabs esto funciona bien, hace el route y todo perfecto peor cuando implemento el menu desplegable no se muestra de ninguna forma, alguna idea?
Code - Codigo
import React from 'react';
import { Redirect, Route } from 'react-router-dom';
import {
IonApp,
IonIcon,
IonLabel,
IonPage,
IonRouterOutlet,
IonTabBar,
IonTabButton,
IonTabs,
IonHeader,
IonTitle,
IonToolbar,
IonMenu,
IonContent,
IonList,
IonMenuToggle,
IonItem
} from '@ionic/react';
import { IonReactRouter } from '@ionic/react-router';
import { apps, flash, send, home, contacts, pricetags, settings, logIn, informationCircle } from 'ionicons/icons';
// Componentes necesarios
import RedSocial from './pages/Red/RedSocial';
import Login from './pages/Login/Login';
import LoginController from './pages/LoginController/LoginController';
import CreateCompany from './pages/CreateCompany/CreateCompany';
import Productos from './pages/Productos/Productos';
import Ajustes from './pages/Ajustes/Ajustes';
import Publicidad from './pages/Publicidad/Publicidad';
import InfoApp from './pages/Info/Info';
import Home from './pages/Home/Home';
import CreateAccount from './pages/CreateAccount/CreateAccount'
/* Core CSS required for Ionic components to work properly */
import '@ionic/react/css/core.css';
/* Basic CSS for apps built with Ionic */
import '@ionic/react/css/normalize.css';
import '@ionic/react/css/structure.css';
import '@ionic/react/css/typography.css';
/* Optional CSS utils that can be commented out */
import '@ionic/react/css/padding.css';
import '@ionic/react/css/float-elements.css';
import '@ionic/react/css/text-alignment.css';
import '@ionic/react/css/text-transformation.css';
import '@ionic/react/css/flex-utils.css';
import '@ionic/react/css/display.css';
/* Theme variables */
import './theme/variables.css';
// Capacitor core native caracteristics
import { Plugins } from '@capacitor/core';
const { Storage } = Plugins;
interface state {
isLogged: any,
NameCompany: any ,
userdata: any,
rol: boolean,
Company: { LogoURL: Object | String | null , PortadaURL: Object | String | null} }
interface props { }
class App extends React.Component<props, state>{
constructor(props: props) {
super(props)
this.state = {
isLogged: false,
userdata: false,
rol: false,
Company: {
LogoURL: null,
PortadaURL: null
},
NameCompany: "Mi Empresa"
}
}
async componentDidMount() {
let value = await Storage.get({ key: "Login" })
// NO SE TOCA
if (typeof value.value === 'string') {
var Json = JSON.parse(value.value)
console.log(Json);
this.setState({ isLogged: Json.Login,
rol: Json.UserData.rol,
userdata: Json,
Company: Json.Company,
NameCompany: Json.Company.name})
}
}
OptionsMenu() {
if (this.state.rol) {
return (
<>
<IonItem href="/Home">
<IonIcon slot="start" icon={home} />
<IonLabel>Inicio</IonLabel>
</IonItem>
<IonItem href="/Red">
<IonIcon slot="start" icon={contacts} />
<IonLabel>Red Social</IonLabel>
</IonItem>
<IonItem href="/Publicidad">
<IonIcon slot="start" icon={document} />
<IonLabel>Publicidad</IonLabel>
</IonItem>
<IonItem href="/Productos">
<IonIcon slot="start" icon={pricetags} />
<IonLabel>Productos</IonLabel>
</IonItem>
<IonItem href="/Ajustes">
<IonIcon slot="start" icon={settings} />
<IonLabel>Ajustes</IonLabel>
</IonItem>
</>
);
} else {
return (
<>
<IonItem href="/LoginController">
<IonIcon slot="start" icon={home} />
<IonLabel>Inicio</IonLabel>
</IonItem>
<IonItem href="/Login">
<IonIcon slot="start" icon={logIn} />
<IonLabel>Ingresar</IonLabel>
</IonItem>
<IonItem href="/CreateAccount">
<IonIcon slot="start" icon={logIn} />
<IonLabel>Crear Cuenta</IonLabel>
</IonItem>
<IonItem href="/Info/App">
<IonIcon slot="start" icon={informationCircle} />
<IonLabel>Sobre Mi Empresa [develop]</IonLabel>
</IonItem>
</>
);
}
}
render(){
return(
<IonApp>
<IonReactRouter>
<IonPage id="main">
{/* Aqui va el menu */}
<IonContent>
<IonMenu contentId="main">
<IonHeader>
<IonToolbar>
<IonTitle>{ this.state.NameCompany }</IonTitle>
</IonToolbar>
</IonHeader>
<IonContent>
<IonList>
<IonMenuToggle key={Math.random()} auto-hide="false">
{
this.OptionsMenu()
}
</IonMenuToggle>
</IonList>
</IonContent>
</IonMenu>
</IonContent>
<IonTabs>
<IonRouterOutlet style={{margintop: "7vh" }}>
<Route exact path="/" render={() => <Redirect to="/Home" />} />
<Route exact path="/:tab(LoginController)"
render={() => (this.state.isLogged
? <Redirect to="/Home" />
: <LoginController />)} />
<Route exact path="/Publicidad"
render={() => (this.state.isLogged
? <Publicidad rol={this.state.rol} Company={this.state.userdata.UserData.company} />
: <Redirect to="/Home" />)} />
<Route exact path="/Home"
render={() => (this.state.isLogged
? <Home CompanyData={ this.state.Company }/>
: <Redirect to="/LoginController" />)} />
<Route exact path="/Red"
render={() => (this.state.isLogged
? <RedSocial userdata={this.state.userdata.UserData} />
: <Redirect to="/LoginController" />)} />
<Route exact path="/CreateCompany"
render={() => (
this.state.isLogged
? <Redirect to="/LoginController" />
: <CreateCompany />
)} />
<Route exact path="/CreateAccount"
render={() => (
this.state.isLogged
? <Redirect to="/Home" />
: <CreateAccount />
)} />
<Route exact path="/Ajustes"
render={() => (this.state.isLogged
? <Ajustes
rol={this.state.rol}
Company={this.state.userdata.UserData.company}
Id={this.state.userdata.UserData._id}
Token={this.state.userdata.UserData.token} />
: <Redirect to="/LoginController" />)} />
<Route exact path="/Productos"
render={() => (
this.state.isLogged
? <Productos
Token={this.state.userdata.UserData.token}
Company={this.state.userdata.UserData.company} />
: <Redirect to="/LoginController" />
)} />
<Route exact path="/Login" render={() => (
this.state.isLogged
? <Redirect to="/Home" />
: <Login />
)} />
<Route exact path="/Info/App" render={()=> <InfoApp /> } />
</IonRouterOutlet>
<IonTabBar slot="bottom">
<IonTabButton tab="tab1" href="/tab1">
<IonIcon icon={flash} />
<IonLabel>Tab One</IonLabel>
</IonTabButton>
<IonTabButton tab="tab2" href="/tab2">
<IonIcon icon={apps} />
<IonLabel>Tab Two</IonLabel>
</IonTabButton>
<IonTabButton tab="tab3" href="/tab3">
<IonIcon icon={send} />
<IonLabel>Tab Three</IonLabel>
</IonTabButton>
</IonTabBar>
</IonTabs>
</IonPage>
</IonReactRouter>
</IonApp>
);
}
}
export default App;