شروع کار با React Navigation 4
سلام دوستان.همونطور که میدونید اخیرا نسخه 4 کتابخانه React Navigation با کلی تغییر منتشر شد.در این نسخه برای این که بتونیم از stack , tab یا drawer استفاده کنیم باید علاوه بر نصب کتابخانه react navigation کتابخانه مربوط به هر کدام را نصب کرد تا بتوان از آن ها استفاده کرد.
مراحل نصب:
1. ابتدا کتابخانه react navigation را نصب میکنیم:
|
1 2 3 |
yarn add react-navigation # or with npm # npm install react-navigation |
نکته: برای این که بتونیم از دستور yarn برای نصب کتابخانه مورد نظر استفاده کنیم ابتدا باید این پکیج را نصب کرد.
2. نوبت به نصب کتابخانه های react-native-gesture-handler و react-native-reanimated و react-native-screens رسیده:
|
1 |
yarn add react-native-reanimated react-native-gesture-handler react-native-screens@^1.0.0-alpha.23 |
نکته: اگر از اندروید استفاده میکنید برای کامل کردن مراحل نصب کتابخانه react-native-screens نیاز است دستور زیر را در بخش dependencies مسیر android/app/build.gradle قرار دهید:
|
1 2 |
implementation 'androidx.appcompat:appcompat:1.1.0-rc01' implementation 'androidx.swiperefreshlayout:swiperefreshlayout:1.1.0-alpha02' |
3. در آخر باید کتابخانه های خودمونو لینک کنیم.
اگر نسخه react native پروژتون از 0.60 بالاتره لینک کردن بطور خودکار انجام میشه .
و اگر نسخه react native پروژتون از 0.59 کمتره نیاز است کتابخانه های خودتونو با استفاده از دستورات زیر لینک کنید:
|
1 2 3 |
react-native link react-native-reanimated react-native link react-native-gesture-handler react-native link react-native-screens |
و برای کتابخانه react-native-gesture-handler درون فایل 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 |
package com.reactnavigation.example; 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 { @Override protected String getMainComponentName() { return "Example"; } + @Override + protected ReactActivityDelegate createReactActivityDelegate() { + return new ReactActivityDelegate(this, getMainComponentName()) { + @Override + protected ReactRootView createRootView() { + return new RNGestureHandlerEnabledRootView(MainActivity.this); + } + }; + } } |
نکته: تنها خطوطی را که در ابتدای آن علامت + قرار دارد جایگذاری کنید و علامت + را پاک کنید .
مراحل استفاده از stack:
ابتدا stack رو نصب میکنیم:
|
1 |
yarn add react-navigation-stack |
و برای استفاده اونو اینپورت میکنیم:
|
1 |
import { createStackNavigator } from 'react-navigation-stack'; |
مثال:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
import React from 'react'; import { View, Text } from 'react-native'; import { createAppContainer } from 'react-navigation'; import { createStackNavigator } from 'react-navigation-stack'; class HomeScreen extends React.Component { render() { return ( <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}> <Text>Home Screen</Text> </View> ); } } const AppNavigator = createStackNavigator({ Home: { screen: HomeScreen, }, }); export default createAppContainer(AppNavigator); |
مراحل استفاده از Drawer:
ابتدا Drawer رو نصب میکنیم:
|
1 |
yarn add react-navigation-drawer |
و برای استاده اونو ایمپورت میکنیم:
|
1 |
import { createDrawerNavigator } from 'react-navigation-drawer'; |
مثال:
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 87 88 89 90 91 92 93 94 95 |
import {createAppContainer} from 'react-navigation'; import {createDrawerNavigator} from 'react-navigation-drawer'; import {createStackNavigator} from 'react-navigation-stack'; import Screen1 from './pages/Screen1'; import Screen2 from './pages/Screen2'; import Screen3 from './pages/Screen3'; class NavigationDrawerStructure extends Component { toggleDrawer = () => { //Props to open/close the drawer this.props.navigationProps.toggleDrawer(); }; render() { return ( <View style={{ flexDirection: 'row' }}> <TouchableOpacity onPress={this.toggleDrawer.bind(this)}> {/*Donute Button Image */} <Image source={require('./image/drawer.png')} style={{ width: 25, height: 25, marginLeft: 5 }} /> </TouchableOpacity> </View> ); } } const FirstActivity_StackNavigator = createStackNavigator({ First: { screen: Screen1, navigationOptions: ({ navigation }) => ({ title: 'Demo Screen 1', headerLeft: <NavigationDrawerStructure navigationProps={navigation} />, headerStyle: { backgroundColor: '#FF9800', }, headerTintColor: '#fff', }), }, }); const Screen2_StackNavigator = createStackNavigator({ Second: { screen: Screen2, navigationOptions: ({ navigation }) => ({ title: 'Demo Screen 2', headerLeft: <NavigationDrawerStructure navigationProps={navigation} />, headerStyle: { backgroundColor: '#FF9800', }, headerTintColor: '#fff', }), }, }); const Screen3_StackNavigator = createStackNavigator({ Third: { screen: Screen3, navigationOptions: ({ navigation }) => ({ title: 'Demo Screen 3', headerLeft: <NavigationDrawerStructure navigationProps={navigation} />, headerStyle: { backgroundColor: '#FF9800', }, headerTintColor: '#fff', }), }, }); const DrawerNavigatorExample = createDrawerNavigator({ //Drawer Optons and indexing Screen1: { //Title screen: FirstActivity_StackNavigator, navigationOptions: { drawerLabel: 'Demo Screen 1', }, }, Screen2: { //Title screen: Screen2_StackNavigator, navigationOptions: { drawerLabel: 'Demo Screen 2', }, }, Screen3: { //Title screen: Screen3_StackNavigator, navigationOptions: { drawerLabel: 'Demo Screen 3', }, }, }); export default createAppContainer(DrawerNavigatorExample); |
Screen1.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 |
//This is an example code for NavigationDrawer// import React, { Component } from 'react'; //import react in our code. import { StyleSheet, View, Text } from 'react-native'; // import all basic components export default class Screen1 extends Component { //Screen1 Component render() { return ( <View style={styles.MainContainer}> <Text style={{ fontSize: 23 }}> Screen 1 </Text> </View> ); } } const styles = StyleSheet.create({ MainContainer: { flex: 1, paddingTop: 20, alignItems: 'center', marginTop: 50, justifyContent: 'center', }, }); |
Screen2.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 |
//This is an example code for NavigationDrawer// import React, { Component } from 'react'; //import react in our code. import { StyleSheet, View, Text } from 'react-native'; // import all basic components export default class Screen2 extends Component { //Screen2 Component render() { return ( <View style={styles.MainContainer}> <Text style={{ fontSize: 23 }}> Screen 2 </Text> </View> ); } } const styles = StyleSheet.create({ MainContainer: { flex: 1, paddingTop: 20, alignItems: 'center', marginTop: 50, justifyContent: 'center', }, }); |
Screen3.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 |
//This is an example code for NavigationDrawer// import React, { Component } from 'react'; //import react in our code. import { StyleSheet, View, Text } from 'react-native'; // import all basic components export default class Screen3 extends Component { //Screen3 Component render() { return ( <View style={styles.MainContainer}> <Text style={{ fontSize: 23 }}> Screen 3 </Text> </View> ); } } const styles = StyleSheet.create({ MainContainer: { flex: 1, paddingTop: 20, alignItems: 'center', marginTop: 50, justifyContent: 'center', }, }); |
مراحل استفاده از Tab:
ابتدا Tab رو نصب میکنیم:
|
1 |
yarn add react-navigation-tabs |
و برای استاده اونو ایمپورت میکنیم:
|
1 |
<span class="token keyword">import</span> <span class="token punctuation">{</span> createBottomTabNavigator <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react-navigation-tabs'</span><span class="token punctuation">;</span> |
مثال:
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 |
import React from 'react'; import {createAppContainer} from 'react-navigation'; import {createMaterialTopTabNavigator} from 'react-navigation-tabs'; import {createStackNavigator} from 'react-navigation-stack'; import FirstPage from './pages/FirstPage'; import SecondPage from './pages/SecondPage'; const TabScreen = createMaterialTopTabNavigator( { Home: { screen: FirstPage }, Settings: { screen: SecondPage }, }, { tabBarPosition: 'top', swipeEnabled: true, animationEnabled: true, tabBarOptions: { activeTintColor: '#FFFFFF', inactiveTintColor: '#F8F8F8', style: { backgroundColor: '#633689', }, labelStyle: { textAlign: 'center', }, indicatorStyle: { borderBottomColor: '#87B56A', borderBottomWidth: 2, }, }, } ); //making a StackNavigator to export as default const App = createStackNavigator({ TabScreen: { screen: TabScreen, navigationOptions: { headerStyle: { backgroundColor: '#633689', }, headerTintColor: '#FFFFFF', title: 'TabExample', }, }, }); export default createAppContainer(App); |
FirstPage.js
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
// Home screen import React, { Component } from 'react'; //import react in our code. import { Text, View } from 'react-native'; //import all the components we are going to use. export default class FirstPage extends React.Component { render() { return ( <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}> <Text>Home Screen</Text> </View> ); } } |
SecondPage.js
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
// Setting screen import React, { Component } from 'react'; //import react in our code. import { Text, View } from 'react-native'; //import all the components we are going to use. export default class SecondPage extends React.Component { render() { return ( <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}> <Text>Setting Screen</Text> </View> ); } } |
خروجی گرفتن از اپلیکیشن:
ابتدا شبیه ساز خود را اجرا میکنید و ترمینال سیستمتون رو باز میکنید و به مسیر پروژه میرید و از کامد زیر برای اجرای اپتون استفاده میکنید:
|
1 2 3 4 5 |
react-native run-android (react-native run-ios (macOS only |
مطالب زیر را حتما مطالعه کنید
چگونه از ماژول های نیتیو Android و IOS در React Native استفاده کنیم؟
گاهی اوقات هنگام توسعه برنامه‌ها با React Native، در موقعیتی...
تفاوت توسعه برنامه های android و ios
هر توسعه دهنده ای زمانی که می خواهد یکی از...
استفاده از Flipper در پروژه های ری اکت نیتیو (React Native)
Flipper یک ابزار debugging توسعه داده شده توسط فیسبوک است...
نمایش PDF در react native
pdf یکی از پرکاربردترین و محبوب ترین فرمت های document...
استفاده از Mapbox در react native (ری اکت نیتیو)
Mapbox یکی از بهترین جایگزین های توصیه شده برای Google...
نمایش عکس های گوشی در react native (ری اکت نیتیو)
در این نوشته تصمیم گرفتم در مورد نمایش عکس های...
7 دیدگاه
به گفتگوی ما بپیوندید و دیدگاه خود را با ما در میان بگذارید.
سلام
من زمان اجرا دستور react-native run android خطا No emulators found as an output of
emulator -list-avdsرو دریافت میکنمشبیه سازم هم از طریق avd mannager نرم افزار android studio ساختم و run شده و متغیرهای java-home و android-home رو هم ست کردم
هرکاری میکنم همین ارور رو میده
اگه کمکم کنید واقعا ممنون میشم.
سلام .
به پوشه platform-tools موجود در sdk برید و دستور adb devices رو در cmd اجرا کنید
ببینید آیا emulator رو در لیست میاره یا نه
من هر وقت که این کتابخونه رو به پروژه ام اضافه میکنم همیشه ارور میده اصلا برام درست کار نکرده و الانم این ارور رو میده
Invarient Violation: Module AppRegestry is not Registered callabe module
*********
کد هام هم اینا هستن:
App.js:
import React from ‘react’;
import { View, Text } from ‘react-native’;
import { createAppContainer } from ‘react-navigation’;
import { createStackNavigator } from ‘react-navigation-stack’;
import screen1 from ‘./screen1’;
class HomeScreen extends React.Component {
render() {
return (
Home Screen
);
}
}
const AppNavigator = createStackNavigator({
Home: {
screen: screen1,
},
});
export default createAppContainer(AppNavigator);
و توی ایندکس:
import {AppRegistry} from ‘react-native’;
import App from ‘./App’;
import {name as appName} from ‘./app.json’;
AppRegistry.registerComponent(appName, () => App);
لطفا لطفا کمک کنید یا اینکه اگر کتابخونه بهتر دیگه ای سراغ دارید معرفی کنید ممنون میشم
سلام محمد عزیز
مشکل از این کتابخونه نیست
در قسمت AppRegistry.registerComponent(appName, () => App); شما باید به جای appName نام پروژه خودتون رو قرار بدید به همین دلیل بهتون هشدار میده که Invarient Violation: Module AppRegestry is not Registered callabe module
همچنین این کتابخونه بروز شده و بهتره از نسخه 5 استفاده کنید که نحوه کار با نسخه 5 در یکی از مقالات سایت وجود داره
سلام من میخوام کار با navigation 4 رو شروع کنم اما به یک مشکل جدی برخورد کردم و هر کاری میکنم درست نمیشه . تو برنامه اندروید بعد از نصب پکیج ها به این ارور برخورد میکنم و فکر نکنم مشکل از پروکسی باشه چون سایت اندروید دولوپر رو باز میکنه
ERROR: Unable to resolve dependency for ‘:react-native-screens@debug/compileClasspath’: Could not resolve androidx.collection:collection:1.1.0.
خیلی ممنون میشم اگه راهنماییم کنید
سلام
نسخه های build.gradle کتابخونه رو با build.gradle پروژه رو یکی کردین نسخه ها رو؟
ممنون از شما.