در مقاله میخواهیم راجع به React native router flux صحبت کنیم. اگر شما نیز برنامه نویسی را در حوزه react native تجربه کرده باشید مطمئناً با نام روتر فلاکس برخورد کرده اید و میخواهید بدانید که این کتابخانه ری اکت نیتیو چگونه کار میکند. در این آموزش با ما همراه باشید تا باهم نحوه کار این کتابخانه قدرتمند react native را ببینیم.

مقاله پیشنهادی: نحوه کار با react native elements و ویژگی های آن

React native router flux چیست؟

اگر شما شروع به ساخت اپلیکیشن اندروید ویا به طور کلی موبایل کرده باشید به هنگام ساخت صفحات مختلف به فکر استفاده از کتابخانه ای برای جابه جایی میان این صفحات میوفتادید. برای اینکار میتوانید از کتابخانه های مختلفی استفاده کنید که یکی از قوی ترین و ساده ترین آن ها روتر فلاکس است. این کتابخانه برای جابه جایی بین صفحات در اپلیکیشن Android یا به طور کلی موبایلی شما میتواند قابلیت های بی نظیری را ارائه دهد. پس روتر فلاکس در حقیقت کتابخانه ای برای جابه جایی در بین صفحات مختلف است.

استفاده از  React native router flux

برای اینکه کار خود را با روتر فلاکس شروع کنیم میبایست ابتدا باید آن را نصب کنیم. طریقه نصب این کتابخانه به شکل زیر است.

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

بعد از نوشتن دستور زیر از آنجایی که میخواهیم router flux پروژه را به طور کامل هندل کند آن را در index.ios.js اد میکنیم. در صورتی که بخواهید از آن در android استفاده کنید میتوانید همین کار را در index.android.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 reactTutorialAppAppRegistry.registerComponent('reactTutorialApp', () => reactTutorialApp)

حال ما میتوانیم مولفه ( components ) های route را در درون پوشه component ها قرار دهیم. اینکار باعث return router ها به همراه تعدادی scene می شود. هرکدام از این scene ها به یک کلید و کامپوننت و همچنین عنوان نیاز دارد. در حقیقت router با استفاده از ویژگی key در بین scene ها جابه جا می شود و پس از آن با استفاده از component ها شروع به رندرگیری اطلاعات روی صفحه کرده و پس از آن نیز با استفاده از ویژگی title، عناوین را به کاربران نمایش می دهد.

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

حال که router را اد کردیم زمان آن رسیده که components ها را اضافه کنیم. ما از مرحله پیش مولفه home را داشتیم اما در این قسمت مولفه about نیز به آن اضافه میکنیم. همچنین از دو function نیز استفاده می کنیم که وضیفه جابه جایی بین این دو components را بر عهده دارند. این فانکشن ها Gotoabout و GotoHome هستند.

Home.js

mport 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

حال برنامه صفحه اصلی را به ما نشان میدهد.

همچنین ما میتوانیم با زدن دکمه به About سوییچ کرده و بعد از آن با استفاده فلش Back که در صفحه ظاهر می شود به صفحه قبلی برگردید.

در این مقاله دیدیدم که چگونه و به سادگی میتوان با React native router flux کار کرد و برای جابه جایی بین منوها به سادگی و روانی هرچه بیشتر از آن استفاده کرد. باید گفت که کتابخانه های دیگری برای اینکار در react native وجود دارند اما React native router flux قدرت و سادگی بسیار زیاد و مثال زدنی دارد.

دوره های آموزش برنامه نویسی اندروید استودیو