react native मूल आधार पाद लेख नेविगेशन टैब




react-native navigation (4)

आपको एक मौजूदा सूचकांक बनाने और एक टैब से दूसरे टैब पर स्विच करने के लिए फ़ंक्शन को बाध्य करने की आवश्यकता है। इसे इसका उपयोग करने के लिए:

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

आशा करता हूँ की ये काम करेगा :)

मैं नेटिव पर प्रतिक्रिया देने के लिए नया हूँ और मैंने तीन बटन टैब के साथ एक पाद लेख बनाया है। अब मैं सोच रहा हूं कि बटन पर क्लिक करके विभिन्न स्क्रीन कैसे प्रस्तुत करें मेरा कोड:

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

बटन दबाए जाने पर मैं स्क्रीन को बदलने के बारे में कैसे जाना होगा?


आप स्थिर <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>
       )
   }
}

मुझे लगता है कि हम @ 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>
       )
   }
}

मुझे लगता है कि देशी-आधार v2.3.1 (अगस्त 2017) के रूप में सुझाए गए तरीके से प्रतिक्रिया नेविगेशन / टैबनेविगेटर पर दस्तावेज़ीकरण का पालन करना है। बेशक यह तब होता है जब आप वाकई नेविगेशन के फायदों के साथ TabNavigator (जो मैं करता हूं) का उपयोग करने का इरादा रखता हूं (मुझे यह जानने के लिए पर्याप्त नहीं है कि वे क्या हैं)।

लेकिन यदि आप चाहते हैं कि एक ऐप के लिए एक तदर्थ यंत्रणा के बजाय, अपने ऐप के मुख्य नेविगेशन संरचना का हिस्सा होने के लिए पाद लेख टैब, तो यह जाने का तरीका लगता है

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






navigation