web-dev-qa-db-fra.com

Onglets de navigation de la base native

Je suis nouveau à React Native et j'ai créé un pied de page avec trois onglets de boutons. Je me demande maintenant comment rendre différents écrans en cliquant sur les boutons. Mon code:

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>
  );
 }
}

Comment pourrais-je changer d'écrans lorsque les boutons sont enfoncés?

react-nativenavigation
6
red_student

Vous pouvez ajouter un rendu conditionnel à la place de la balise <App/> statique. Vous pouvez utiliser le code suivant pour effectuer un rendu conditionnel en fonction du pied de page sélectionné. (J'ai utilisé une variable d'état pour stocker l'index de page sélectionné. Lorsque l'index a été modifié, la fonction de rendu est automatiquement appelée par le moteur)

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>
       )
   }
}
7
Hossein Mobasher

Je pense qu'à partir de la version 2.3.1 (août 2017) de la base native, il est recommandé de suivre la documentation sur React Navigation/TabNavigator . Bien sûr, cela n’est valable que si vous avez réellement l’intention d’utiliser TabNavigator (ce que je fais) avec les avantages de React Navigation (je ne suis pas assez au courant pour vous dire quels sont ces avantages).

Mais si vous souhaitez que les onglets de bas de page fassent partie de la structure de navigation principale de votre application, au lieu d'un mécanisme ad-hoc pour une page, cela semble être la voie à suivre.

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>
      );
    }
  }
));
2
Hendy Irawan

Je pense que nous pouvons vérifier une partie du code de @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>
       )
   }
}
1
Yasin Ugurlu

Vous devez créer un index actuel et lier la fonction pour passer d'un onglet à un autre. Pour cela, utilisez ceci: 

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>
       )
   }
}

J'espère que ça aide :)

1
fandro