Native Base Footer Nav Tabs

Question

Я новичок в React Native и создал нижний колонтитул с тремя вкладками кнопок. Теперь мне интересно, как отображать различные экраны, нажимая кнопки. Мой код:

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

Как я могу сменить экраны при нажатии кнопок?

Answer 1

Вы можете добавить условный рендеринг вместо статического <App/> тегов. Вы можете использовать код как следующий, чтобы сделать условно основанным на выбранном нижнем колонтитуле. (Я использовал переменные состояния для хранения индекса выбранной страницы. Когда индекс изменился, визуализация функция автоматически вызывается двигателем)

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

Вам необходимо создать текущий индекс и связать функцию, чтобы переключиться с вкладки на другую. Для этого используйте это:

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

Надеется, что это помогает :)

Answer 3

Я думаю, как нативные базы V2.3.1 (августа 2017) рекомендуемый способ следовать documentation on React Navigation/TabNavigator. Конечно, это только если вы намереваетесь использовать TabNavigator (что я делаю) с преимуществами React Navigation (я недостаточно осведомлен, чтобы сказать, что это такое).

Но если вы хотите, чтобы вкладки нижнего колонтитула являлись частью основной структуры навигации вашего приложения, а не рекламным механизмом для одной страницы, это, по-видимому, путь.

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

Я думаю, что мы можем проверить, какую-то часть кода @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> 
     ) 
    } 
}