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

4 سال پیش

امتیاز دهید post

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

در این درس از مجموعه آموزش برنامه نویسی سایت سورس باران، به آموزش روتر در برنامه نویسی ریکت نیتیو خواهیم پرداخت.

مرحله 1: روتر را نصب کنید

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

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

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

مرحله 2: برنامه کامل

از آنجا که می خواهیم روتر ما کل برنامه را مدیریت کند، آن را در index.ios.js اضافه خواهیم کرد. برای اندروید نیز می توانید همین کار را در 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 (
         &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)

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

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

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

مرحله 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 = () =&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

React Native Router

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

React Native Router

منبع.

لیست جلسات قبل آموزش ریکت نیتیو

امتیاز دهید post

نویسنده مطلب saber

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

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

مرحله 1: روتر را نصب کنید

مرحله 2: برنامه کامل

App.js

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

Routes.js

مرحله 4: ایجاد مولفه ها

Home.js

About.js

لیست جلسات قبل آموزش ریکت نیتیو

دیدگاه شما

بدون دیدگاه

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

مرحله 1: روتر را نصب کنید

مرحله 2: برنامه کامل

App.js

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

Routes.js

مرحله 4: ایجاد مولفه ها

Home.js

About.js

لیست جلسات قبل آموزش ریکت نیتیو

دیدگاه شما

برای صرف‌نظر کردن از پاسخ‌گویی اینجا را کلیک نمایید.

بدون دیدگاه