آموزش Router در ریکت نیتیو

آموزش Router در ریکت نیتیو

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

آموزش Router در ریکت نیتیو

مرحله ۱: آموزش نصب Router در ریکت نیتیو

برای شروع، ما باید روتر را نصب کنیم. ما در این فصل از React Native Router Flux استفاده خواهیم کرد. شما می توانید دستور زیر را در terminal از پوشه پروژه اجرا کنید.

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

مرحله ۲: Entire Application در ریکت نیتیو

از آنجا که ما می خواهیم Router ما برای رسیدگی به کل برنامه باشد، ما آن را در index.ios.js اضافه کنیم. برای آندروید، شما می توانید همین کار را در 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 reactTutorialApp
AppRegistry.registerComponent('reactTutorialApp', () => reactTutorialApp)

مرحله ۳: اضافه کردن Router در ریکت نیتیو

حالا ما کامپوننت روترها را داخل پوشه components ایجاد خواهیم کرد. این روتر را با چند scenes بر خواهد گرداند. هر scenes به کلید، کامپونتت و عنوان نیاز دارد. روتر از ویژگی اصلی برای تغییر بین scenes استفاده می کند، کامپوننت بر روی صفحه نمایش داده می شود و عنوان در نوار navigation نمایش داده می شود. ما همچنین می توانیم ویژگی اولیه را به scenes ی که در ابتدا رندر می شود تنظیم کنیم.

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

مرحله ۴: ایجاد کامپوننت در ریکت نیتیو

ما در حال حاضر قسمت Home از فصل های قبلی داریم؛ در حال حاضر، ما نیاز به اضافه کردن کامپوننت About داریم. ما GoToAbout و توابع goToHome را برای تغییر بین scenes ها اضافه خواهیم کرد.

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 ارایه خواهد شد

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

امیدواریم که این جلسه مورد توجه دوستان غزیز قرار گرفته باشد…

منبع : Tutorialspoint

لیست جلسات قبل آموزش React Native

1. React Native یا ریکت نیتیو چیست؟
2. آموزش React Native – نصب و تنظیم محیط React Native
3. آموزش App در React Native
4. آموزش کار با State در React Native
5. آموزش کار با کامپوننت Props در React Native
6. آموزش استایل دهی در برنامه نویسی React Native
7. آموزش flex در برنامه نویسی react native
8. آموزش لیست ویو در برنامه نویسی React Native
9. آموزش کار با TextInput در برنامه نویسی ریکت نیتیو
10. آموزش ScrollView در برنامه نویسی ریکت نیتیو
11. آموزش کار با تصاویر در برنامه نویسی ریکت نیتیو
12. آموزش HTTP در برنامه نویسی ریکت نیتیو
13. آموزش کار با Button در ریکت نیتیو
14. آموزش کار با انیمیشن در ریکت نیتیو
15. آموزش دیباگ کردن در ریکت نیتیو

راستی! برای دریافت مطالب جدید در کانال تلگرام یا پیج اینستاگرام سورس باران عضو شوید.