रिएक्ट नेटिव - राउटर

इस अध्याय में, हम React Native में नेविगेशन को समझेंगे।

चरण 1: राउटर स्थापित करें

के साथ शुरू करने के लिए, हमें स्थापित करने की आवश्यकता है Router। हम इस अध्याय में React Native Router Flux का उपयोग करेंगे। आप प्रोजेक्ट फ़ोल्डर से टर्मिनल में निम्न कमांड चला सकते हैं।

npm i react-native-router-flux --save

चरण 2: संपूर्ण आवेदन

चूँकि हम चाहते हैं कि हमारा राउटर पूरे एप्लिकेशन को संभाल ले, हम इसे इसमें जोड़ देंगे index.ios.js। Android के लिए, आप इसमें भी कर सकते हैंindex.android.js

App.js

import React, { Component } from 'react';
import { AppRegistry, View } from 'react-native';
import Routes from './Routes.js'

class reactTutorialApp extends Component {
   render() {
      return (
         <Routes />
      )
   }
}
export default reactTutorialApp
AppRegistry.registerComponent('reactTutorialApp', () => reactTutorialApp)

चरण 3: राउटर जोड़ें

अब हम बनाएंगे Routesघटक फ़ोल्डर के अंदर घटक। यह वापस आ जाएगीRouterकई दृश्यों के साथ। प्रत्येक दृश्य की आवश्यकता होगीkey, component तथा title। राउटर दृश्यों के बीच स्विच करने के लिए प्रमुख संपत्ति का उपयोग करता है, घटक को स्क्रीन पर प्रदान किया जाएगा और शीर्षक को नेविगेशन बार में दिखाया जाएगा। हम भी सेट कर सकते हैंinitial दृश्य के लिए संपत्ति जो शुरू में प्रदान की जानी है।

Routes.js

import React from 'react'
import { Router, Scene } from 'react-native-router-flux'
import Home from './Home.js'
import About from './About.js'

const Routes = () => (
   <Router>
      <Scene key = "root">
         <Scene key = "home" component = {Home} title = "Home" initial = {true} />
         <Scene key = "about" component = {About} title = "About" />
      </Scene>
   </Router>
)
export default Routes

चरण 4: घटक बनाएँ

हमारे पास पहले से ही है Homeपिछले अध्यायों से घटक; अब, हमें जोड़ने की आवश्यकता हैAboutघटक। हम जोड़ देंगेgoToAbout और यह goToHome दृश्यों के बीच स्विच करने के लिए कार्य करता है।

Home.js

import React from 'react'
import { TouchableOpacity, Text } from 'react-native';
import { Actions } from 'react-native-router-flux';

const Home = () => {
   const goToAbout = () => {
      Actions.about()
   }
   return (
      <TouchableOpacity style = {{ margin: 128 }} onPress = {goToAbout}>
         <Text>This is HOME!</Text>
      </TouchableOpacity>
   )
}
export default Home

About.js

import React from 'react'
import { TouchableOpacity, Text } from 'react-native'
import { Actions } from 'react-native-router-flux'

const About = () => {
   const goToHome = () => {
      Actions.home()
   }
   return (
      <TouchableOpacity style = {{ margin: 128 }} onPress = {goToHome}>
         <Text>This is ABOUT</Text>
      </TouchableOpacity>
   )
}
export default About

एप्लिकेशन प्रारंभिक प्रस्तुत करेगा Home स्क्रीन।

आप लगभग स्क्रीन पर स्विच करने के लिए बटन दबा सकते हैं। पीछे तीर दिखाई देगा; आप इसे पिछली स्क्रीन पर वापस लाने के लिए उपयोग कर सकते हैं।