react-native - example - react navigation v2

Pestañas Nav nativas de pie de página

Question

Soy nuevo en React Native y he creado un pie de página con tres pestañas de botones. Ahora me pregunto cómo renderizar diferentes pantallas haciendo clic en los botones. Mi código:

export default class Uptown extends Component {
render() {
  return (
    <Container>
      <Header>
        <Title>Uptown</Title>
      </Header>

      <Content>
        <App />
      </Content>

            <Footer>
                <FooterTab>
                  <Button>
                    Contact
                  </Button>
                  <Button>
                    Here
                  </Button>
                  <Button>
                    Me
                  </Button>
                </FooterTab>
            </Footer>
        </Container>
  );
 }
}

¿Cómo voy a cambiar las pantallas cuando se presionan los botones?

Answer 1

Necesita crear un índice actual y vincular la función para pasar de una pestaña a otra. Para hacerlo, usa esto:

import First from ''./First'' 
import Second from ''./Second'' 

class Updown extends Component {
   constructor(props) {
      super(props)
      this.setState({currentIndex: 0}) // default screen index
   }

   switchScreen(index) {
      this.setState({currentIndex: index})
   }

   render() {
      let AppComponent = null;
//Here you can add as many tabs you need
      if (this.state.currentIndex == 0) {
         AppComponent = First
      } else {
         AppComponent = Second
      }

      return (
         <Container>
           <Header><Title> Header... </Title></Header>
           <Content> 
           {AppComponent}  // Load the component like this
          </Content>
           <Footer>
//HERE don''t forget the bind function and pass the appropriate number
               <Button onPress={() => this.switchScreen.bind(this,0) }> First </Button>
               <Button onPress={() => this.switchScreen.bind(this,1) }> Second </Button>
           </Footer>
         </Container>
       )
   }
}

Espero eso ayude :)

Answer 2

Puede agregar una representación condicional en lugar de la etiqueta <App/> estática. Puede usar el código de la siguiente manera para representar de forma condicional el pie de página seleccionado. (Utilicé la variable de estado para almacenar el índice de página seleccionado. Cuando se modificó el índice, la función de renderización fue llamada automáticamente por el motor)

import First from ''./Home'' // your first screen
import Next from ''./Next'' // your second screen

class Updown extends Component {
   constructor(props) {
      super(props)
      this.state = {index: 0} // default screen index
   }

   switchScreen(index) {
      this.setState({index: index})
   }

   render() {
      let AppComponent = null;

      if (this.state.index == 0) {
         AppComponent = First
      } else {
         AppComponent = Second
      }

      return (
         <Container>
           <Header><Title> Header... </Title></Header>
           <Content> <AppComponent/> </Content>
           <Footer>
               <Button onPress={() => this.switchScreen(0) }> First </Button>
               <Button onPress={() => this.switchScreen(1) }> Second </Button>
           </Footer>
         </Container>
       )
   }
}

Answer 3

Creo que a partir de v2.3.1 nativa (agosto de 2017) la forma recomendada es seguir la documentación en React Navigation / TabNavigator . Por supuesto, esto es solo si realmente tiene la intención de usar TabNavigator (lo que hago) con los beneficios de Reaccionar Navegación (no estoy lo suficientemente informado como para decir cuáles son).

Pero si desea que las pestañas del pie de página sean parte de la estructura de navegación principal de su aplicación, en lugar de un mecanismo ad-hoc para una página, este parece ser el camino a seguir.

import React, { Component } from "react";
import LucyChat from "./LucyChat.js";
import JadeChat from "./JadeChat.js";
import NineChat from "./NineChat.js";
import { TabNavigator } from "react-navigation";
import { Button, Text, Icon, Footer, FooterTab } from "native-base";
export default (MainScreenNavigator = TabNavigator(
  {
    LucyChat: { screen: LucyChat },
    JadeChat: { screen: JadeChat },
    NineChat: { screen: NineChat }
  },
  {
    tabBarPosition: "bottom",
    tabBarComponent: props => {
      return (
        <Footer>
          <FooterTab>
            <Button
              vertical
              active={props.navigationState.index === 0}
              onPress={() => props.navigation.navigate("LucyChat")}>
              <Icon name="bowtie" />
              <Text>Lucy</Text>
            </Button>
            <Button
              vertical
              active={props.navigationState.index === 1}
              onPress={() => props.navigation.navigate("JadeChat")}>
              <Icon name="briefcase" />
              <Text>Nine</Text>
            </Button>
            <Button
              vertical
              active={props.navigationState.index === 2}
              onPress={() => props.navigation.navigate("NineChat")}>
              <Icon name="headset" />
              <Text>Jade</Text>
            </Button>
          </FooterTab>
        </Footer>
      );
    }
  }
));

Answer 4

Creo que podemos verificar alguna parte del código @Hossein Mobasher

import First from ''./Home'' // your first screen
import Next from ''./Next'' // your second screen

class Updown extends Component {
   constructor(props) {
      super(props)
      this.state = {index: 0} // default screen index
   }

   switchScreen(index) {
      this.setState({index: index})
   }

   render() {
      let AppComponent = null;

      if (this.state.index == 0) {
         AppComponent = First
      } else {
         AppComponent = Second
      }

      return (
         <Container>
           <Header><Title> Header... </Title></Header>
           <Content> 
            <AppComponent/> // you can write like this
           </Content>
           <Footer>
               <Button onPress={() => this.switchScreen(0) }> First </Button>
               <Button onPress={() => this.switchScreen(1) }> Second </Button>
           </Footer>
         </Container>
       )
   }
}