react native navigation

در‌این نوشته‌ی‌علمی ، کمپانی پلاتین ، به آنالیز کتابخانه react navigation خوا‌هیم پرداخت.

درین نوشته‌علمی به معرفی طریق ساخت‌و‌ساز نرم افزار‌های ری‌اکت با طراحی اپلیکیشن به کار گیری از ورژن کتابخانه React Native Navigation میپردازیم. ورژن دوم کتابخانه React Native Navigation جدیداً تکثیر یافته میباشد. به همین ادله ، در‌این نوشته سعی کرده‌ایم به معرفی و تحلیل آن بپردازیم. این کتابخانه یک پیاده‌سازی از ناوبری نیتیو و خیر یک پیاده‌سازی بر طبق جاوا اسکریپت می‌باشد. این بدان معنا است که‌این کتابخانه به صورت معمول سعی بالاتری داشته و از تعامل‌ها و گذار کاغذ سرازیر‌تری در مقایسه با دیگر چاره‌هایی که پیاده‌سازی نیتیو ندارند شامل است.

ورژن ۲ کتابخانه React Native Navigation یک ویرایش از ورژن نخستین این کتابخانه است که بعضی از خطاها آن را که در ورژن نخستین پیدا شدند رفع نموده است. درین راهنما طریق ایجاد یک گردش فعالیت احراز نام و نشان حقیقی و واقعی را میسازیم که یک مشابه‌سازی از شرایط احراز نام‌و‌نشان با به کارگیری از AsyncStorage میباشد. ولی می توانید از هر ارائه‌دهنده خدمت احراز نام و نشان که خودتان گزینش میکنید به کار گیری فرمایید.

گردش فعالیت چه‌گونه است؟

react native navigation
زمانی که اپ بارگذاری میگردد، یک کامپوننت مقداردهی (Initializing) ابتدایی را لود میکنیم. در به عبارتی هین آنالیز می‌ خواهد شد که آیا کاربری در خاطر دستگاه ذخیره شده‌است یا این که نه. درصورتی که کاربری در یاد دستگاه وجود داشته باشد، مسیر Home را در یک ناوبری مبنی بر stack رندر می کنیم.

در حالتی که کاربری در خاطر دستگاه جانور نباشد، کامپوننت‌های auth (یعنی SignIn و SignUp) را در یک ناوبری بر طبق tab پیگیری میکنیم.

react native navigation
 

ابتدا فعالیت
در اولِ عمل ، بایستی یک پروژه ری‌اکت نیتیو را با استعمال از React Native CLI بسازیم:

۱
react-native init RNNav2
بعد از npm یا این که ya برای نصب ناوبری ری‌اکت نیتیو به کار گیری میکنیم:

۱
۲
۳
npm install react-native-navigation@alpha
# or
ya add react-native-navigation@alpha
اکنون بایستی تعلق‌های نیتیو را پیوند کرده و پاره ای کد نیتیو نیز بنویسیم.

ساخت و ساز فولدر‌ها
در‌این مرحله ، پوشه‌هایی که برای این نرم‌افزار نیاز می‌باشند را ساخت‌و‌ساز می کنیم. نخست یک فولدر به اسم src در دایرکتوری root ساخت‌و‌ساز می کنیم تا همگی چیز را در آن بنویسیم:

۱
mkdir src
آنگاه پوشه‌های ذیل را در دایرکتوری src میسازیم:

۱
۲
cd src
touch config.js Home.js Initializing.js SignIn.js SignUp.js screens.js navigation.js Screen2.js
درحال حاضر کارکرد این فولدر‌ها را توضیح می‌دهیم:

پوشه config.js: این فولدر بعضی داده ها تنظیمات مقدماتی اپ را در خویش مکان میدهد که درباره ی نمونه بالا دربرگیرنده کلید AsyncStorage برای بازیابی استفاده کننده از یاد میباشد.

فولدر Home.js: این پوشه در شکل آمدن مخاطب به اکانت، دربرگیرنده کامپوننت خواهد بود.

فولدر Initializing.js: این فولدر منطق مقداردهی نخستین را در خویش مکان داده و در طول لود برنامه یک پیام تحت عنوان خروجی برای استفاده کننده نشان می دهد.

پوشه Signin.js / SignUp.js: این فولدر‌ها مشتمل بر فرم‌های نام نویسی و ورود استفاده کننده می‌باشند. در فولدر Signin.js یک بازهدایت استفاده کننده به برگه Home نیز درنظرگرفته شده میباشد.

فولدر screens.js: این پوشه تنظیمات ورقه را برای کتابخانه React Native Navigation در خویش مکان داده میباشد.

فولدر navigation.js: این پوشه تابع‌های ناوبری را در خویش مکان میدهد. ما دو تابع مهم به اسم‌های ()goToAuth و ()goHome داریم.

پوشه Screen۲.js: این پوشه دربرگیرنده کامپوننت دیگری برای ناوبری به/از ورقه مهم اپ میباشد که از ناوبری پشته‌ای stack سود می گیرد.

تثبیت کردن کاغذ‌ها
در حین به کارگیری از React Native Navigation می بایست هریک از شیت‌ها را که در نرم‌افزار ما استعمال شود تثبیت کرد.

به‌این خواسته از متد registerComponent در کتابخانه React Native Navigation به کار گیری میشود. کلیه کاغذ‌هایی را که می خواهیم مقداردهی کنیم، در یک تابع منفرد قرار میدهیم و آن را قبل از ساخت و ساز root ناوبری خویش فراخوانی میکنیم.

۱
۲
۳
۴
۵
۶
۷
۸
۹
۱۰
۱۱
// screens.js

import {Navigation} from 'react-native-navigation';

export function registerScreens() {
  Navigation.registerComponent('Home', () => require('./Home').default);
  Navigation.registerComponent('Initializing', (sc) => require('./Initializing').default);
  Navigation.registerComponent('SignIn', () => require('./SignIn').default);
  Navigation.registerComponent('SignUp', () => require('./SignUp').default);
  Navigation.registerComponent('Screen2', () => require('./Screen2').default);
}
در‌این کد ، یک تابع را ساخت‌و‌ساز و اکسپورت کرده‌ایم که ()Navigation.registerComponent را روی هر کامپوننتی که میخواهیم در ناوبری خویش داشته باشیم، فراخوانی می‌نماید.

تثبیت کردن اپ
آن گاه پوشه index.js را طوری به‌روزرسانی می کنیم که پشته ناوبری ابتدایی نرم افزار تهیه و تنظیم و مقداردهی خواهد شد.

۱
۲
۳
۴
۵
۶
۷
۸
۹
۱۰
۱۱
۱۲
۱۳
۱۴
۱۵
// index.js
import {Navigation} from 'react-native-navigation';
import {registerScreens} from './src/screens';

registerScreens();

Navigation.events().registerAppLaunchedListener(() => {
  Navigation.setRoot({
    root: {
      component: {
        name: 'Initializing'
      }
    },
  });
});
در کد فوق تابع registerScreens را ایمپورت و فراخوانی میکنیم.

همینطور ریشه ابتدایی پشته نرم‌افزار را با فراخوانی Navigation.setRoot گزینش کرده و مسیرهای اول را که میخواهیم برنامه ما رندر نماید به آن ارسال می کنیم. دراین مورد root یک کامپوننت منفرد، به اسم کاغذ Initializing خواهد بود.

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

مسیر ریشه یا این که root به عبارتی جایی می‌باشد که پشته مسیر مهم را در آن تعریف‌و‌تمجید می کنیم. ما میخواهیم آیتم ریست کردن پشته‌ی ریشه را به مسیرهای احراز نام و نشان و یا این که در شکل داخل شدن مخاطب، به خویش نرم افزار حقیقی وواقعی در دست داشته باشیم:

۱
۲
۳
۴
۵
۶
۷
۸
۹
۱۰
۱۱
۱۲
۱۳
۱۴
۱۵
۱۶
۱۷
۱۸
۱۹
۲۰
۲۱
۲۲
۲۳
۲۴
۲۵
۲۶
۲۷
۲۸
۲۹
۳۰
۳۱
۳۲
۳۳
۳۴
۳۵
۳۶
۳۷
۳۸
۳۹
۴۰
۴۱
۴۲
۴۳
۴۴
۴۵
۴۶
۴۷
۴۸
۴۹
۵۰
۵۱
// navigation.js
import { Navigation } from 'react-native-navigation'

export const goToAuth = () => Navigation.setRoot({
  root: {
    bottomTabs: {
      id: 'BottomTabsId',
      children: [
        {
          component: {
            name: 'SignIn',
            options: {
              bottomTab: {
                fontSize: ۱۲,
                text: 'Sign In',
                icon: require('./signin.png')
              }
            }
          },
        },
        {
          component: {
            name: 'SignUp',
            options: {
              bottomTab: {
                text: 'Sign Up',
                fontSize: ۱۲,
                icon: require('./signup.png')
              }
            }
          },
        },
      ],
    }
  }
});

export const goHome = () => Navigation.setRoot({
  root: {
    stack: {
      id: 'App',
      children: [
        {
          component: {
            name: 'Home',
          }
        }
    ],
    }
  }
})
تصاویری که برای شیت‌های فوق به کار گیری میکنیم، به طور ذیل می‌باشند. شما میتوانید آن‌ها‌را ذخیره کرده و گزینه به کارگیری قرار دهید.

تصویر صفحه ورود (SignIn):

تصویر صفحه نام نویسی (SignUp):

در فولدر navigation.js دو تابع مو جود هست:

goToAuth – این تابع پشته مسیر ریشه مارا به تنظیمات مسیر bottomTabs تهیه و تنظیم می‌نماید. هر شیت یک کامپوننت میباشد که اسم و بعضا مورد‌ها برای آن تنظیمات شده‌است.
goHome – این تابع پشته مسیر را به طور ناوبری stack گزینش می‌نماید و یک کامپوننت منفرد را به آرایه فرزندان یعنی کامپوننت Home ارسال می‌نماید.
ذخیره‌سازی کلید AsyncStorage در یک فولدر تنظیمات
ما به محاسبه AsyncStorage میپردازیم تا ببینیم آیا استفاده کننده تا قبل از اینً نام نویسی نموده است یا این که نه. این عمل در یکسری فولدر شکل می گیرد. کلید AsyncStorage را در یک فولدر غیروابسته ذخیره میکنیم تا بتوانیم آن را به آسانی گزینه به کار گیری دوباره در اختیار بگذاریم.

۱
۲
// config.js
export const USER_KEY = 'USER_KEY'
تولید صفحه ها
فعلا همگی تنظیمات‌های ناوبری را که ما یحتاج بوده را ساخت و ساز کرده‌ایم و نوبت به آن رسیده میباشد که شیت‌ها و کامپوننت‌هایی که آیتم استعمال قرار خوا هیم بخشید را بسازیم.

پوشه Initializing.js

۱
۲
۳
۴
۵
۶
۷
۸
۹
۱۰
۱۱
۱۲
۱۳
۱۴
۱۵
۱۶
۱۷
۱۸
۱۹
۲۰
۲۱
۲۲
۲۳
۲۴
۲۵
۲۶
۲۷
۲۸
۲۹
۳۰
۳۱
۳۲
۳۳
۳۴
۳۵
۳۶
۳۷
۳۸
۳۹
۴۰
۴۱
۴۲
۴۳
۴۴
۴۵
۴۶
۴۷
۴۸
// Initializing.js
import React from 'react'
import {
  View,
  Text,
  StyleSheet,
  AsyncStorage
} from 'react-native'

import { goToAuth, goHome } from './navigation'

import { USER_KEY } from './config'

export default class Initialising extends React.Component {
  async componentDidMount() {
    try {
      const user = await AsyncStorage.getItem(USER_KEY)
      console.log('user: ', user)
      if (user) {
        goHome()
      } else {
        goToAuth()
      }
    } catch (err) {
      console.log('error: ', err)
      goToAuth()
    }
  }

  render() {
    retu (
      
        Loading
      
    )
  }
}

const styles = StyleSheet.create({
  welcome: {
    fontSize: ۲۸
  },
  container: {
    flex: ۱,
    justifyContent: 'center',
    alignItems: 'center'
  }
})
در صورتی به کلاس componentDidMount نگاه نمایید می بینید که اکثر اوقات شغل های عمده در‌این فولدر شکل می گیرند. ما AsyncStorage را آنالیز میکنیم تا ببینیم آیا کاربری در خاطر دستگاه ذخیره شده‌است یا این که خیر و در شرایطی که که چنین حالتی وجود داشته باشد شیت Home را لود می کنیم و در غیر این شکل مسیرهای Auth یعنی SignIn و SignUp را لود خوا‌هیم کرد.

هنگامی که کلاس componentDidMount منطق موردنیاز برای نظارت ذخیره شدن استفاده کننده در دستگاه را اجرا می‌نماید؛ یک پیام لود را برای کاربری اکران میدهیم. آن‌گاه پشته مسیر را بر مبنای این که استفاده کننده جانور میباشد یا این که خیر ریست میکنیم.

پوشه Home.js

۱
۲
۳
۴
۵
۶
۷
۸
۹
۱۰
۱۱
۱۲
۱۳
۱۴
۱۵
۱۶
۱۷
۱۸
۱۹
۲۰
۲۱
۲۲
۲۳
۲۴
۲۵
۲۶
۲۷
۲۸
۲۹
۳۰
۳۱
۳۲
۳۳
۳۴
۳۵
۳۶
۳۷
۳۸
۳۹
۴۰
۴۱
۴۲
۴۳
۴۴
۴۵
۴۶
۴۷
۴۸
۴۹
۵۰
۵۱
۵۲
۵۳
۵۴
۵۵
۵۶
۵۷
۵۸
۵۹
۶۰
۶۱
۶۲
// Home.js
import React from 'react'
import {
  View,
  Text,
  Button,
  StyleSheet,
  AsyncStorage
} from 'react-native'
import { goToAuth } from './navigation'
import {Navigation} from 'react-native-navigation';

import { USER_KEY } from './config'

export default class Home extends React.Component {
  static get options() {
    retu {
      topBar: {
        title: {
          text: 'Home'
        },
      }
    };
  }
  logout = async () => {
    try {
      await AsyncStorage.removeItem(USER_KEY)
      goToAuth()
    } catch (err) {
      console.log('error signing out...: ', err)
    }
  }
  render() {
    retu (
      
        Hello from Home screen.
                   onPress={this.logout}
          title="Sign Out"
        />
                   onPress={() => {
            Navigation.push(this.props.componentId, {
              component: {
                name: 'Screen2',
              }
            });
          }}
          title="View next screen"
        />
      
    )
  }
}

const styles = StyleSheet.create({
  container: {
    flex: ۱,
    justifyContent: 'center',
    alignItems: 'center'
  }
})
در‌این پوشه یک پیام ابتدایی را برای مخاطب رندر می کنیم و این آیتم را در مشت ایشان قرار می دهیم که یا این که از اپ بیرون گردد و یا این که به مسیر دیگری برود.

یک نکته گوناگون که می بایست درین نصیب گزینه اشاره قرار اعطا کرد، نحوه فراخوانی متدهای ناوبری میباشد. ما به مکان به کار گیری از props مانند ورژن سابق (this.props.navigator.push) یعنی API مرتبط با Navigation را ایمپورت کرده و Navigation.push را فراخوانی می کنیم.

همینطور متوجه یک تابع کلاس استاتیک به اسم ()get options می‌شویم. این تابع را می‌اقتدار به تعریف‌و‌تمجید کامپوننت ری‌اکت برگه اضافه کرد و مدل‌بندی و مشخصه‌ها را در ظاهر ناوبری خاطر نشان نمود. درخصوص نمونه گزینه ارزیابی، ما فقطً یک مشخصه تیتر برای topBar به کارگیری کرده‌ایم.

پوشه Screen۲.js

۱
۲
۳
۴
۵
۶
۷
۸
۹
۱۰
۱۱
۱۲
۱۳
۱۴
۱۵
۱۶
۱۷
۱۸
۱۹
۲۰
۲۱
۲۲
۲۳
۲۴
۲۵
۲۶
۲۷
۲۸
۲۹
۳۰
۳۱
۳۲
۳۳
۳۴
۳۵
۳۶
۳۷
۳۸
۳۹
import React from 'react'
import {
  View,
  Text,
  Button,
  StyleSheet,
} from 'react-native'
import {Navigation} from 'react-native-navigation';

export default class Screen2 extends React.Component {
  static get options() {
    retu {
      topBar: {
        title: {
          text: 'Screen 2'
        },
      }
    };
  }
  render() {
    retu (
      
        Screen ۲
                   onPress={() => Navigation.pop(this.props.componentId)}
          title="Go Back"
        />
      
    )
  }
}

const styles = StyleSheet.create({
  container: {
    flex: ۱,
    justifyContent: 'center',
    alignItems: 'center'
  }
})
این پوشه یک کاغذ به طور کاملً ابتدایی می‌باشد که فقطً برای اکران ناوبری در یک ناوبری پشته‌ای از کاغذ Home گزینه به کار گیری قرار می‌ گیرد. نکته‌ای که بایستی اشاره نمود، روش فراخوانی تابع Navigation.pop است. این طریق نیز از ورژن سابق API که در آن از props استعمال میشد (this.props.navigator.pop) متعدد هست و در ورژن ۲ از API Navigation ایمپورت گردیده از کتابخانه React Native Navigation با اسم استعمال می کنیم.

پوشه SignUp.js

۱
۲
۳
۴
۵
۶
۷
۸
۹
۱۰
۱۱
۱۲
۱۳
۱۴
۱۵
۱۶
۱۷
۱۸
۱۹
۲۰
۲۱
۲۲
۲۳
۲۴
۲۵
۲۶
۲۷
۲۸
۲۹
۳۰
۳۱
۳۲
۳۳
۳۴
۳۵
۳۶
۳۷
۳۸
۳۹
۴۰
۴۱
۴۲
۴۳
۴۴
۴۵
۴۶
۴۷
۴۸
۴۹
۵۰
۵۱
۵۲
۵۳
۵۴
۵۵
۵۶
۵۷
۵۸
۵۹
۶۰
۶۱
۶۲
۶۳
۶۴
۶۵
۶۶
۶۷
۶۸
۶۹
۷۰
۷۱
۷۲
۷۳
۷۴
۷۵
۷۶
۷۷
۷۸
۷۹
۸۰
۸۱
۸۲
۸۳
۸۴
۸۵
// SignUp.js
import React from 'react'
import {
  View,
  Button,
  TextInput,
  StyleSheet
} from 'react-native'

export default class SignUp extends React.Component {
  state = {
    useame: '', password: '', email: '', phone_number: ''
  }
  onChangeText = (key, val) => {
    this.setState({ [key]: val })
  }
  signUp = async () => {
    const { useame, password, email, phone_number } = this.state
    try {
      // here place your signup logic
      console.log('user successfully signed up!: ', success)
    } catch (err) {
      console.log('error signing up: ', err)
    }
  }

  render() {
    retu (
      
                   style={styles.input}
          placeholder='Useame'
          autoCapitalize="none"
          placeholderTextColor='white'
          onChangeText={val => this.onChangeText('useame', val)}
        />
                   style={styles.input}
          placeholder='Password'
          secureTextEntry={true}
          autoCapitalize="none"
          placeholderTextColor='white'
          onChangeText={val => this.onChangeText('password', val)}
        />
                   style={styles.input}
          placeholder='Email'
          autoCapitalize="none"
          placeholderTextColor='white'
          onChangeText={val => this.onChangeText('email', val)}
        />
                   style={styles.input}
          placeholder='Phone Number'
          autoCapitalize="none"
          placeholderTextColor='white'
          onChangeText={val => this.onChangeText('phone_number', val)}
        />
                   title='Sign Up'
          onPress={this.signUp}
        />
      
    )
  }
}

const styles = StyleSheet.create({
  input: {
    width: ۳۵۰,
    height: ۵۵,
    backgroundColor: '#۴۲A5F5',
    margin: ۱۰,
    padding: ۸,
    color: 'white',
    borderRadius: ۱۴,
    fontSize: ۱۸,
    fontWeight: '۵۰۰',
  },
  container: {
    flex: ۱,
    justifyContent: 'center',
    alignItems: 'center'
  }
})
پوشه SignUp.js اینک فقطً یک محیط خالی برای فرم نام نویسی به حساب می‌آید. می‌قدرت از این محیط برای پیاده‌سازی خدمت احراز نام و نشان آیتم استعمال منفعت گرفت.

فولدر SignIn.js

۱
۲
۳
۴
۵
۶
۷
۸
۹
۱۰
۱۱
۱۲
۱۳
۱۴
۱۵
۱۶
۱۷
۱۸
۱۹
۲۰
۲۱
۲۲
۲۳
۲۴
۲۵
۲۶
۲۷
۲۸
۲۹
۳۰
۳۱
۳۲
۳۳
۳۴
۳۵
۳۶
۳۷
۳۸
۳۹
۴۰
۴۱
۴۲
۴۳
۴۴
۴۵
۴۶
۴۷
۴۸
۴۹
۵۰
۵۱
۵۲
۵۳
۵۴
۵۵
۵۶
۵۷
۵۸
۵۹
۶۰
۶۱
۶۲
۶۳
۶۴
۶۵
۶۶
۶۷
۶۸
۶۹
۷۰
۷۱
۷۲
۷۳
۷۴
۷۵
۷۶
۷۷
۷۸
// SignIn.js
import React from 'react'
import {
  View,
  Text,
  StyleSheet,
  TextInput,
  Button,
  AsyncStorage
} from 'react-native'

import { goHome } from './navigation'
import { USER_KEY } from './config'

export default class SignIn extends React.Component {
  state = {
    useame: '', password: ''
  }
  onChangeText = (key, value) => {
    this.setState({ [key]: value })
  }
  signIn = async () => {
    const { useame, password } = this.state
    try {
       // login with provider
       const user = await AsyncStorage.setItem(USER_KEY, useame)
       console.log('user successfully signed in!', user)
       goHome()
    } catch (err) {
      console.log('error:', err)
    }
  }
  render() {
    retu (
      
                   style={styles.input}
          placeholder='Useame'
          autoCapitalize="none"
          autoCorrect={false}
          placeholderTextColor='white'
          onChangeText={val => this.onChangeText('useame', val)}
        />
                   style={styles.input}
          placeholder='Password'
          autoCapitalize="none"
          secureTextEntry={true}
          placeholderTextColor='white'
          onChangeText={val => this.onChangeText('password', val)}
        />
                   title='Sign In'
          onPress={this.signIn}
        />
      
    )
  }
}

const styles = StyleSheet.create({
  input: {
    width: ۳۵۰,
    fontSize: ۱۸,
    fontWeight: '۵۰۰',
    height: ۵۵,
    backgroundColor: '#۴۲A5F5',
    margin: ۱۰,
    color: 'white',
    padding: ۸,
    borderRadius: ۱۴
  },
  container: {
    flex: ۱,
    justifyContent: 'center',
    alignItems: 'center'
  }
})
فولدر SignIn.js
این کامپوننت مشتمل بر یک فرم نام نویسی بی آلایش است. در متد کلاسی signIn یک نام نویسی برنده را با انتخاب مشخصه اسم کاربری در AsyncStorage مشابه‌سازی کرده‌ایم و استفاده کننده را به شیت Home هدایت میکنیم. در حال حاضر بایستی بتوانیم اپ را اجرا کنیم: