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

0 دیدگاه

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

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

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

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

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

1	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 (
         &lt;Routes /&gt;
      )
   }
}
export default reactTutorialApp
AppRegistry.registerComponent('reactTutorialApp', () =&gt; reactTutorialApp)

import React, { Component } from 'react';

import { AppRegistry, View } from 'react-native';

import Routes from './Routes.js'

class reactTutorialApp extends Component {

render() {

return (

)

}

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 = () =&gt; (
   &lt;Router&gt;
      &lt;Scene key = "root"&gt;
         &lt;Scene key = "home" component = {Home} title = "Home" initial = {true} /&gt;
         &lt;Scene key = "about" component = {About} title = "About" /&gt;
      &lt;/Scene&gt;
   &lt;/Router&gt;
)
export default Routes

import React from 'react'

import { Router, Scene } from 'react-native-router-flux'

import Home from './Home.js'

import About from './About.js'

const Routes = () => (

</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 = () =&gt; {
   const goToAbout = () =&gt; {
      Actions.about()
   }
   return (
      &lt;TouchableOpacity style = {{ margin: 128 }} onPress = {goToAbout}&gt;
         &lt;Text&gt;This is HOME!&lt;/Text&gt;
      &lt;/TouchableOpacity&gt;
   )
}
export default Home

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>

)

}

export default Home

About.js

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

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

import React from 'react'

import { TouchableOpacity, Text } from 'react-native'

import { Actions } from 'react-native-router-flux'

const About = () => {

const goToHome = () => {

Actions.home()

}

return (

<Text>This is ABOUT</Text>

</TouchableOpacity>

)

}

export default About

برنامه در صفحه اولیه Home ارایه خواهد شد

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

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

منبع : Tutorialspoint

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

React Native یا ریکت نیتیو چیست؟

آموزش React Native – نصب و تنظیم محیط React Native

آموزش App در React Native

آموزش کار با State در React Native

آموزش کار با کامپوننت Props در React Native

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

آموزش flex در برنامه نویسی react native

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

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

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

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

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

آموزش کار با Button در ریکت نیتیو

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

آموزش دیباگ کردن در ریکت نیتیو

5/5 - (1 امتیاز)

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

نظرات

برچسب ها: ریکت نیتیو

صابر بوستانی

داستان من با دنیای برنامه‌ نویسی آغاز شد، و در ادامه به عنوان یک توسعه‌ دهنده نرم‌ افزار، طراح وب سایت و متخصص سئو، مهارت ‌های تکنیکی و تحلیلی خودم رو پرورش دادم. علاقه م به دنیای مالی منو به سمت یادگیری ترید و معامله‌گری سوق داد. و در حال حاضر در برنامه نویسی و معامله گری ارز دیجیتال انجام میدم. از سال 96 سعی کردم معامله گری در کریپتو رو یاد بگیرم. ترید و معامله گری برام پر از چالش و شکست‌ های متعدد بود. اما هر شکست، درسی ارزشمند برام داشت و من رو به یک تریدر و معامله گر قوی‌ تر و هوشمندتر تبدیل کرد. با پشتکار و یادگیری مداوم، تونستم به موفقیت‌های قابل توجهی دست یابم و به معامله گری موفق تبدیل بشم. در اینجا بزرگترین تجربیات و مهمترین دانش خودم رو در اختیار شما قرار میدم تا در مدت زمان کوتاه تر و شکست های کمتر در این مسیر به موفقیت برسید.

پکیج صفر تا صد آموزش سئو و بهینه سازی بصورت عملی

انتشار: ۱۲ آبان ۱۴۰۱

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

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

صابر بوستانی

دسته بندی موضوعات

آخرین محصولات فروشگاه

نظرات

بازخوردهای خود را برای ما ارسال کنید

لغو پاسخ

مطالب مرتبط