بخش های اصلی

آموزش React Native

React Native – مسیریابی

در این بخش نحوه ی تنظیم مسیر یابی در برنامه های React Native را آموزش میدیم.

از آن جایی که  در این بخش بیش تر قسمت های کد را تغییر دادیم، خوب به این آموزش دقت کنین، ولی مطمئن باشین که ویژگی ها و قابلیت های جالبی را به شما آموزش خواهیم داد.

در تمام بخش های قبلی از MyContainerComponent و MyPresentationalComponent استفاده کردیم؛ به این خاطر که بتوانیم با جداسازی منطق و view (نمایش)، راحت کار کنیم.

اکنون که مفهومِ React Native را درک کردین، در این بخش از مثال های واقعی استفاده می کنیم.

مرحله ی 1 – ایجاد فایل ها و فولدرها

فایل ها و فولدر های استفاده شده را در لیست زیر توضیح میدیم:

  • Router.js – این فایل، کامپوننتِ Router است. این فایل را در پوشه ی src/components قرار میدیم.
  • home – فولدرِ صفحه ی home (اصلی) – مسیر این فولدر src/components/home است. در این پوشه دو کامپوننت با نام هایِ HomeContainer.js و HomeButton.js ایجاد می کنیم.
  • about – فولدرِ صفحه ی About (درباره ی ما) – مسیر این فولدر src/components/about است. دو کامپوننت با نام های AboutContainer.js و AboutButton.js را در این فولدر تعریف می کنیم.

مرحله ی 2 – Router

در مثال زیر چیز های زیادی وجود داره.

  • Navigator – این عنصر، مسیریابی (routing) را هَندِل می کنه. initialRoute، renderScene و navigatorBar را تعریف خواهیم کرد. در ادامه راجع به این propها توضیح میدیم.
  • initialRoute – با این prop، مسیری که بعد از اجرای برنامه، اول از همه رِندِر میشه را تعیین می کنیم. این prop فقط یک شیِ است که برای آن name (برای مسیریابی استفاده میشه) و title (برای تنظیمِ عنوان استفاده میشه) تعیین می کنیم.
  • renderScene – این تابع برای محاسبه ی مسیرهاست. برای این تابع از route.name استفاده می کنیم. اگه initialRoute را بررسی کنین، می بینین که name: 'Home' دقیقا مثلِ route.name == 'Home' در renderScene خواهد بود. با این روش برنامه مسیرِ اولیه در Home را میداند.
  • navigator و ...route.passProps را هم پاس میدیم تا به تمام چیزهایی که در کامپوننتِ رِندِر شده وجود داره، دسترسی داشته باشیم.
  • NavigationBar – از propای با نامِ NavigationBarRouteMapper استفاده می کنیم تا عنوان و دکمه ها را برای نوارِ مسیریابی مشخص کنیم. دکمه ی سمت چپ، برای دکمه ی بازگشت استفاده می شه و دکمه ی سمت راست فقط در صورتی وجود خواهد داشت که route.openMenu وجود داشته باشه. راجع به این موضوع در کامپوننتِ Home بیش تر یاد میگیرین.

مثال

import React, { Component } from 'react'

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

import AboutContainer from './about/AboutContainer'
import HomeContainer from './home/HomeContainer'

export default class Router extends Component {
   constructor(){
      super()
   }
   render() {
      return (
         <Navigator
            initialRoute = {{ name: 'Home', title: 'Home' }}
            renderScene = { this.renderScene }
            navigationBar = {
               <Navigator.NavigationBar
                  style = { styles.navigationBar }
                  routeMapper = { NavigationBarRouteMapper } />
            }
         />
      );
   }
   renderScene(route, navigator) {
      if(route.name == 'Home') {
         return (
            <HomeContainer
               navigator = {navigator}
               {...route.passProps} 
            />
         )
      }
      if(route.name == 'About') {
         return (
            <AboutContainer
               navigator = {navigator}
               {...route.passProps} 
            />
         )
      }
   }
}

var NavigationBarRouteMapper = {
   LeftButton(route, navigator, index, navState) {
      if(index > 0) {
         return (
            <TouchableOpacity
               onPress = {() => { if (index > 0) { navigator.pop() } }}>
               <Text style={ styles.leftButton }>
                  Back
               </Text>
            </TouchableOpacity>
         )
      }
      else { return null }
   },
   RightButton(route, navigator, index, navState) {
      if (route.openMenu) return (
         <TouchableOpacity
            onPress = { () => route.openMenu() }>
            <Text style = { styles.rightButton }>
               { route.rightText || 'Menu' }
            </Text>
         </TouchableOpacity>
      )
   },
   Title(route, navigator, index, navState) {
      return (
         <Text style = { styles.title }>
            {route.title}
         </Text>
      )
   }
};

const styles = StyleSheet.create({
   navigationBar: {
      backgroundColor: 'blue',
   },
   leftButton: {
      color: '#ffffff',
      margin: 10,
      fontSize: 17,
   },
   title: {
      paddingVertical: 10,
      color: '#ffffff',
      justifyContent: 'center',
      fontSize: 18
   },
   rightButton: {
      color: 'white',
      margin: 10,
      fontSize: 16
   }
})

مرحله ی 3 – کامپوننت هایِ Home

این کامپوننت، کامپوننتِ container است. propای با نامِ goToAbout را به HomeButton پاس میدیم. به یاد داشته باشین که openMenu: this.openMenu در تابعِ push قرار داره و دکمه ی Menu را در صفحه ی About فعال می کنه.

src/components/home/HomeContainer.jss

مثال

import React, { Component } from 'react'
import {
   View
} from 'react-native'
import HomeButton from './HomeButton'

export default class HomeContainer extends Component {
   constructor() {
      super()
   }
   render() {
      return (
         <View>
            <HomeButton goToAbout = {this.goToAbout}/>
         </View>
      )
   }
   openMenu = () =>{
      alert("Menu button pressed!")
   }
   goToAbout = () => {
      this.props.navigator.push({
         name: 'About',
         title: 'About',
         openMenu: this.openMenu
      });
   }
}

HomeButton یک کامپوننتِ نمایشیِه. این کامپوننت استایل ها را هَندِل می کنه و تابع goToAbout را که بعنوانِ prop از HomeContainer پاس داده شده، فراخوانی می کنه.

src/components/home/HomeButton.js

مثال

import React, { Component } from 'react'
import {
   View,
   Text,
   TouchableOpacity,
   StyleSheet
} from 'react-native'

export default HomeButton = (props) => {
   return (
      <View style = {styles.container}>
         <TouchableOpacity
            style = {styles.button}
            onPress = {props.goToAbout}>
            <Text>
               Go To About
            </Text>
         </TouchableOpacity>
      </View>
   )
}

const styles = StyleSheet.create ({
   container: {
      marginTop: 100,
      flexDirection: 'column',
      justifyContent: 'center',
      alignItems: 'center'
   },
   button: {
      borderWidth: 1,
      padding: 10,
      borderColor: 'black'
   }
})

مرحله ی 4 – کامپوننتِ About

این کامپوننت فقط یک کامپوننت خالیِه که برای صفحه ی About استفاده میشه.

src/components/about/AboutContainer.js

مثال

import React, { Component } from 'react'
import {
   View,
} from 'react-native'

export default class AboutContainer extends Component {
   constructor() {
      super()
   }
   render() {
      return (
         <View>
         
         </View>
      )
   }
}

مرحله ی 5 – اتصال به Router (مسیریاب)

برای این که بتوانیم در برنامه از router استفاده کنیم، باید آن را در index.ios.js و index.android.js قرار بدیم.

index.ios.js و index.android.js

مثال

import React, { Component } from 'react'
import {
   AppRegistry,
   View
} from 'react-native'
import Router from './src/components/Router'

class reactTutorialApp extends Component {
   render() {
      return (
         <Router />
      )
   }
}

AppRegistry.registerComponent('reactTutorialApp', () => reactTutorialApp)

اکنون می توانید برنامه را اجرا کنین. با اجرای برنامه صفحه ی Home نمایش داده خواهد شد.

خروجی

می توانید برای باز کردن صفحه ی About روی دکمه کلیک کنین.

به یاد داشته باشید که دکمه هایِ Back و Menu در نوار مسیریابی (navigator) نمایش داده میشن.

مبحث آموزشی

آموزش React Native

Learn React Native

پرســیدن سؤال جدید

سؤال های تخصصی خود را از ما بپرسید

تبلیغات

دنبال کردن تلگرام کانال سافت اسکیل

https://telegram.me/softskill_ir

عملیات کاربران

خبـرنــامه

Newsletters

در خبــرنـامه سافت اسکیل عضو شویــد تا جدیدترین هـای سایت را بلافاصله در ایمیل خـود دریافت کنیـد