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




react-native navigation (3)

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

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

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


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

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

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


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




navigation