شروع کار با React Navigation 3
سلام دوستان.همونطور که میدونید اخیرا نسخه 3 کتابخانه React Navigation با کلی تغییر منتشر شد.در این نسخه اسم کامپوننت ها تغییر پیدا کرده و شما نمیتونید با نام کامپوننت های قبلی با این کتابخانه کار کنید.اگر از نسخه های 1 یا 2 React Navigation استفاده میکردید و کتابخونه رو بروز کردید حتما باید نام کامپوننت ها رو تغییر بدید تا به مشکل نخورید.شاید بشه گفت مهم ترین آپدیت این کتابخونه میتونه بهتر شدن یا بشه گفت عالی شدن عملکردش باشه.با این آپدیت به نظر من از wix خیلی بهتر عمل میکنه و واقعا جوابگوی هر برنامه با هر تعداد screen هست.پس در این آموزش متنی قصد دارم به شما آموزش بدم که چجوری از React Navigation 3 در پروژه های React Native استفاده کنید.
دوره آموزش کار با React navigation 3
1.دایرکتوری پروژه خودتون رو در Command Prompt یا Terminal باز کنید و دستور زیر رو برای نصب کتابخانه React Navigation اجرا کنید.
|
1 |
npm install --save react-navigation |
2.حالا نیاز دارید کتابخانه react-native-gesture-handler رو به پروژتون اضافه کنید.اگر از Expo استفاده میکنید میتونید این مرحله رو انجام ندید.برای نصب کتابخانه react-native-gesture-handler دستور زیر رو اجرا کنید.
|
1 |
npm install --save react-native-gesture-handler |
3.در نهایت لازمه که شما دستور react–native link رو اجرا کنید تا کتابخونه هایی که نصب کردید به پروژه link بشه.
4.برای نسخه ios پیکربندی خاص دیگه ای لازم نیست و شما میتونید از این کتابخونه استفاده کنید.
5.برای پیکربندی کتابخانه react-native-gesture-handler شما نیاز دارید یک سری تغیییرات در فایل MainActivity.java پروژتون ایجاد کنید.
بنابراین به مسیر YourProject – > android -> app -> src- >main -> java -> com-> YourProject -> MainActivity.java برید و فایل MainActivity.java رو باز کنید و کدهای زیر رو در این فایل قرار بدید.
|
1 2 3 |
import com.facebook.react.ReactActivityDelegate; import com.facebook.react.ReactRootView; import com.swmansion.gesturehandler.react.RNGestureHandlerEnabledRootView; |
همچنین باید تابع ReactActivityDelegate رو نیز در این فایل اضافه کنید
|
1 2 3 4 5 6 7 8 9 |
@Override protected ReactActivityDelegate createReactActivityDelegate() { return new ReactActivityDelegate(this, getMainComponentName()) { @Override protected ReactRootView createRootView() { return new RNGestureHandlerEnabledRootView(MainActivity.this); } }; } |
source code کامل فایل MainActivity.java
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
package com.newproj; import com.facebook.react.ReactActivity; import com.facebook.react.ReactActivityDelegate; import com.facebook.react.ReactRootView; import com.swmansion.gesturehandler.react.RNGestureHandlerEnabledRootView; public class MainActivity extends ReactActivity { /** * Returns the name of the main component registered from JavaScript. * This is used to schedule rendering of the component. */ @Override protected String getMainComponentName() { return "newproj"; } @Override protected ReactActivityDelegate createReactActivityDelegate() { return new ReactActivityDelegate(this, getMainComponentName()) { @Override protected ReactRootView createRootView() { return new RNGestureHandlerEnabledRootView(MainActivity.this); } }; } } |
6.حالا همه تغییرات اعمال شده و میتونیم شروع به کدنویسی کنیم.
7.ایمپورت کردن کامپوننت های StyleSheet, Text, View و Button در فایل App.js
|
1 2 3 |
import React, {Component} from 'react'; import { StyleSheet, Text, View, Button } from 'react-native'; |
8.ایمپورت کامپوننت های createStackNavigator و createAppContainer از کنابخانه React Navigation.
|
1 |
import { createStackNavigator, createAppContainer } from "react-navigation"; |
9.ایجاد یک کلاس به نام HomeScreen.درون این کلاس ما یک View ایجاد میکنیم.این کلاس به عنوان صفحه اصلی اپلیکیشن ما خواهد بود.
static navigationOptions :برای اضافه کردن یک سری ویژگی ها به header مورد استفاده قرار میگیرد.
title : برای مشخص کردن عنوان مورد استفاده قرار میگیرد.
gotoNextActivit: درون این تابع با استفاده از react navigation’s navigate مشخص میکنیم که به screen مورد نظر ما navigate اتفاق بیقته.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
class HomeScreen extends Component{ static navigationOptions = { title: 'HomeScreen', }; gotoNextActivity = () => { this.props.navigation.navigate('Second'); } render() { return ( <View style={styles.MainContainer}> <Text style={styles.text}>This is Home Screen Activity.</Text> <Button onPress = { this.gotoNextActivity } title = 'Open Second Activity'/> </View> ); } } |
اسکرین شات از Home Screen
10.ایجاد یک کلاس دیگر به نام SecondScreen .این کلاس دومین screen اپلیکیشن ما خواهد بود.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
class SecondScreen extends Component{ static navigationOptions = { title: 'SecondScreen', }; render() { return ( <View style={styles.MainContainer}> <Text style={styles.text}>This is Second Screen Activity.</Text> </View> ); } } |
اسکریین شات از Second Screen:
11.تعریف یک متغیر از نوع const به نام RootStack با کامپوننت createStackNavigator و پاس دادن دو کلاس با نام های منحصر به فرد Home و Second
.حالا ما به این کلاس ها با نام های منحصر به فرد دسترسی داریم.
initialRouteName : برای مشخص کردن صفحه اصلی برنامه استفاده می شود.شما میتونید هر کامپوننتی رو به عنوان صفحه اصلی در نظر بگیرید.کافیه نام منحصر به فرد اون کامپوننت رو قرار بدید.اگر از initialRouteName استفاه نکنید اولین کامپوننتی که در createStackNavigator تعریفی کردید به عنوان صفحه Home در نظر گرفته خواهد شد.
|
1 2 3 4 5 6 7 8 9 |
const RootStack = createStackNavigator( { Home: HomeScreen, Second: SecondScreen }, { initialRouteName: "Home" } ); |
12.در آخرین مرحله لازمه که از کامپوننت createAppContainer استفاده کنید و RootStack رو بهش پاس بدید.
|
1 |
export default createAppContainer(RootStack); |
13.ایجاد استایل سفارشی:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
const styles = StyleSheet.create({ MainContainer: { flex: 1, justifyContent: 'center', backgroundColor : '#f5fcff', padding: 11 }, text: { fontSize: 22, color: '#000', textAlign: 'center', marginBottom: 10 }, }); |
کد کامل برنامه در فایل App.js
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 |
import React, {Component} from 'react'; import { StyleSheet, Text, View, Button } from 'react-native'; import { createStackNavigator, createAppContainer } from "react-navigation"; class HomeScreen extends Component{ static navigationOptions = { title: 'HomeScreen', }; gotoNextActivity = () => { this.props.navigation.navigate('Second'); } render() { return ( <View style={styles.MainContainer}> <Text style={styles.text}>This is Home Screen Activity.</Text> <Button onPress = { this.gotoNextActivity } title = 'Open Second Activity'/> </View> ); } } class SecondScreen extends Component{ static navigationOptions = { title: 'SecondScreen', }; render() { return ( <View style={styles.MainContainer}> <Text style={styles.text}>This is Second Screen Activity.</Text> </View> ); } } const RootStack = createStackNavigator( { Home: HomeScreen, Second: SecondScreen }, { initialRouteName: "Home" } ); export default createAppContainer(RootStack); const styles = StyleSheet.create({ MainContainer: { flex: 1, justifyContent: 'center', backgroundColor : '#f5fcff', padding: 11 }, text: { fontSize: 22, color: '#000', textAlign: 'center', marginBottom: 10 }, }); |
مطالب زیر را حتما مطالعه کنید
چگونه از ماژول های نیتیو Android و IOS در React Native استفاده کنیم؟
آموزش آرایه در جاوا اسکریپت ( JavaScript)
استفاده از Flipper در پروژه های ری اکت نیتیو (React Native)
نمایش PDF در react native
ایجاد Timeline ListView در React Native
آموزش React Navigation 5
29 دیدگاه
به گفتگوی ما بپیوندید و دیدگاه خود را با ما در میان بگذارید.
با سلام
من میخوام از react navigation در بروژه م استفاده کنم زمانی که اضافه ش میکنم این ارور در شبیه ساز میاد:
http://uupload.ir/files/r7dx_capture.png
با جستجو در وب دوستان گفتن که ورژن بروژه ری اکت نیتیو رو بیارم روی ۰.۵۵.۴ و من اینکارو کردم و مجدد تست کردم نشد و مجدد همین ارور میاد.
چطور ازش استفاده کنم؟
سلام یه سوال داشتم
من یه stacknavigator داخل bottomTabNavigator دارم، داخل stackNavigator یه فرم دارم که یه سری اطلاعاتی رو از api میگیره و در داخل state ذخیره میکنه…مشکل من اینجاست که بعد از هر بار navigate کردن به همون صفحه برنامه کند تر میشه حتی روی دیوایس واقعی…میخواستم ببینم مشکل از کجاست!!!
سلام.این کندی میتونه دلایل مختلفی داشته باشه.مثلا اگر دارید یک لیست رو RENDER میکنید و براش KEY نگذاشتید یا در تعریف توابعی که انجام دادید باعث RE RENDER های بیهوده میشه.یا shouldComponentUpdate رو استفاده نکردید تا از RE RENDER های بیهوده جلوگیری کنه
خب این مشکل فقط بر روی android اتفاق میفته روی ios تست کردم کاملا روون عمل میکنه
روی android این مشکل فقط بوجود میاد ولی روی ios کاملا روون کار میکنه…
یک دوره در هفته آینده در مورد کار با react navigation 3 منتشر میکنیم.ولی من همچین موردی رو ندیدم که بخواد تو اندروید لگ داشته باشه.ساختار کدهاتون رو بزارید
در این حالت که همه screen ها در فایل App.js قرار گرفته چطوری میتونیم با استفاده از native-base هدر و فوتر و سایدبار اضافه کنیم ؟
سلام.شما وقتی headerMode:none بزارید.میتونید برای هر screen یک هدر سفارشی بسازید
برای ios ترفندی نمیخواد؟؟؟؟
سلام امیر.
برای نسخه ios پیکربندی خاصی لازم نیست و شما میتونید از این کتابخونه استفاده کنید