Native Base Footer Nav Tabs

Question

Ich bin neu in Native Reagieren und haben eine Fußzeile mit drei Schaltflächenregisterkarten erstellt. Ich frage mich nun, wie man verschiedene Bildschirme rendern kann, indem man auf die Knöpfe klickt. Mein 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> 
); 
} 
} 

Wie würde ich gehen, um Bildschirme zu ändern, wenn die Tasten gedrückt werden?

Answer 1

Sie können das bedingte Rendering anstelle des statischen Tags <App/> hinzufügen. Sie können Code wie folgt verwenden, um abhängig von der ausgewählten Fußzeile bedingt zu rendern. (I Zustandsgröße verwendet, um ausgewählte Seite Index zu speichern. Wenn Index geändert, Render-Funktion automatisch vom Motor genannt)

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 2

Sie benötigen einen aktuellen Index zu erstellen und binden, um die Funktion von einem Register zum anderen zu wechseln. Um dies zu tun es verwenden:

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

Hoffe, es hilft :)

Answer 3

Ich denke, als nativer-Basis v2.3.1 (August 2017) der empfohlene Weg documentation on React Navigation/TabNavigator zu folgen ist. Natürlich ist dies nur, wenn Sie tatsächlich beabsichtigen, TabNavigator (was ich tue) mit den Vorteilen von React Navigation zu verwenden (ich bin nicht sachkundig genug, um zu sagen, was diese sind).

Wenn Sie jedoch möchten, dass die Footer-Tabs Teil der Hauptnavigationsstruktur Ihrer App sind, anstatt eines Ad-hoc-Mechanismus für eine Seite, scheint dies der richtige Weg zu sein.

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

Ich denke, dass wir

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