جستجو برای:
  • صفحه اصلی
  • دوره ها
    • راهنمای یادگیری
  • بلاگ
  • تالار گفتمان
  • کانال تلگرام
  • درباره ما
  • تماس با ما
آموزش جاوا اسکریپت(javascript)-کتابخانه ها و فریمورک ها
  • صفحه اصلی
  • دوره ها
    • راهنمای یادگیری
  • بلاگ
  • تالار گفتمان
  • کانال تلگرام
0

ورود و ثبت نام

وبلاگ

آموزش جاوا اسکریپت(javascript)-کتابخانه ها و فریمورک ها > بلاگ > آموزش متنی > ایجاد Drawer Navigator در React Native

ایجاد Drawer Navigator در React Native

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

Drawer Navigator که با Navigation drawer هم شناخته میشه یکی از زیرساخت های مفید برای نمایش و نگه داشتن لیست screen ها در React Native است.Drawer Navigator تمامی screen ها رو بصورت متوالی با یک sidebar سفارشی مدیریت میکنه.در این آموزش متنی ما ابتدا یک sidebar menu سفارشی ایجاد مکینیم و از این sidebar در Drawer Navigator برای نمایش لیست screen ها و جابجایی بین اون ها استفاده میکنیم.

قبل از اینکه شروع به خوندن این مقاله کنید،قبلش حتما تله فیلم آموزشی ایجاد DrawerLayout در React Native رو مشاهده کنید.در این تله فیلم آموزشی بصورت کامل نحوه ایجاد Drawer Layout رو با استفاده از انیمیشن توضیح دادم.

1.نصب کتابخانه react navigation.برای ایجاد Drawer Navigator از کتابخانه react navigation استفاده میکنیم.بنابراین برای نصب دایرکتوری پروژه رو در (command prompt(Terminal باز مکینیم و دستور زیر رو اجرا میکنیم.

1
npm install --save react-navigation

2.ایمپورت کردن کامپوننت های StyleSheet, Platform, View, Text, Image, TouchableOpacity, YellowBox  و Dimensions  در پروژه.

1
2
3
import React, { Component } from 'react';
import { StyleSheet, Platform, View, Text, Image, TouchableOpacity, YellowBox, Dimensions } from 'react-native';

3.ایمپورت کردن کامپوننت DrawerNavigator  از کتابخانه react-navigation

1
import { DrawerNavigator } from 'react-navigation';

4.ایمپورت کردن StackNavigator از کتابخانه react-navigation.بدون استفاده از StackNavigator  ما نمیتونیم چندین کامپوننت داشته باشیم و بین اون ها navigate کنیم.

1
import { StackNavigator } from 'react-navigation'

5.ایجاد یک کلاس جدید در فایل App.js به نام HamburgerIcon .این کلاس آیکون Hamburger رو در Drawer Navigator قرار میده.

toggleDrawer : این تابع برای باز و بسته شدن drawer navigator با استفاده از ()this.props.navigationProps.toggleDrawer استفاده میشه.

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
class HamburgerIcon extends Component {
  toggleDrawer = () => {
    console.log(this.props.navigationProps);
    this.props.navigationProps.toggleDrawer();
  }
  render() {
    return (
      <View style={{ flexDirection: 'row' }}>
        <TouchableOpacity onPress={this.toggleDrawer.bind(this)} >
          <Image
            source={{ uri: 'https://reactnativecode.com/wp-content/uploads/2018/04/hamburger_icon.png' }}
            style={{ width: 25, height: 25, marginLeft: 5 }}
          />
        </TouchableOpacity>
      </View>
    );
  }
}

6.ایجاد یک کلاس به نام Custom_Side_Menu .از این کلاس به عنوان side menu استفاده میشه و لیست همه کامپوننت ها درون این کلاس قرار میگیره.اگر شما میخواید به صورت اختصاصی یک side menu داشته باشید کافیه که در بلاک render’s return تغییرات رو اعمال کنید.

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
class Custom_Side_Menu extends Component {
  render() {
    return (
      <View style={styles.sideMenuContainer}>
        <Image source={{ uri: 'https://reactapp.ir/wp-content/uploads/Guitar.jpg' }}
          style={styles.sideMenuProfileIcon} />
        <View style={{ width: '100%', height: 1, backgroundColor: '#e2e2e2', marginTop: 15}} />
        <View style={{width: '100%'}}>
            <View style={{flexDirection: 'row', alignItems: 'center', marginTop: 10}}>
              <Image source={{ uri: 'https://reactapp.ir/wp-content/uploads/social.jpg' }}
              style={styles.sideMenuIcon} />
              
              <Text style={styles.menuText} onPress={() => { this.props.navigation.navigate('First') }} > First Activity </Text>
            </View>
            <View style={{flexDirection: 'row', alignItems: 'center', marginTop: 10}}>
              <Image source={{ uri: 'https://reactnativecode.com/wp-content/uploads/2018/08/promotions.jpg' }}
              style={styles.sideMenuIcon} />
              <Text style={styles.menuText} onPress={() => { this.props.navigation.navigate('Second') }} > Second Activity </Text>
            </View>
            <View style={{flexDirection: 'row', alignItems: 'center', marginTop: 10}}>
              <Image source={{ uri: 'https://reactapp.ir/wp-content/uploads/outbox.jpg' }}
              style={styles.sideMenuIcon} />
              <Text style={styles.menuText} onPress={() => { this.props.navigation.navigate('Third') }} > Third Activity </Text>
            </View>
       </View>
       <View style={{ width: '100%', height: 1, backgroundColor: '#e2e2e2', marginTop: 15}} />
      </View>
    );
  }
}

آموزش React Native

7.ایجاد یک کلاس جدید به نام MainActivity.این کلاس به عنوان صفحه اصلی اپلیکیشن ما خواهد بود.

YellowBox.ignoreWarnings : از این تابع برای پنهان کردن باکس زرد رنگ هشدار در اپلیکیشن استفاده می شود.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
class MainActivity extends Component {
  constructor(props) {
    super(props);
    YellowBox.ignoreWarnings([
      'Warning: componentWillMount is deprecated',
      'Warning: componentWillReceiveProps is deprecated',
    ]);
  }
  render() {
    return (
      <View style={styles.MainContainer}>
        <Text style={{ fontSize: 23 }}> This is Activity - 1 </Text>
      </View>
    );
  }
}

آموزش react native

8.ایجاد یک کلاس به نام SecondActivity.این کلاس به عنوان دومین کامپوننت اپلیکیشن استفاده میشه.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
class SecondActivity extends Component {
  constructor(props) {
    super(props);
    YellowBox.ignoreWarnings([
      'Warning: componentWillMount is deprecated',
      'Warning: componentWillReceiveProps is deprecated',
    ]);
  }
  render() {
    return (
      <View style={styles.MainContainer}>
        <Text style={{ fontSize: 23 }}> This is Activity - 2 </Text>
      </View>
    );
  }
}

آموزش react native

9.ایجاد یک کلاس به نام ThirdActivity.این کلاس آخرین کامپوننت ما در اپلیکیشن خواهد بود.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
class ThirdActivity extends Component {
  constructor(props) {
    super(props);
    YellowBox.ignoreWarnings([
      'Warning: componentWillMount is deprecated',
      'Warning: componentWillReceiveProps is deprecated',
    ]);
  }
  render() {
    return (
      <View style={styles.MainContainer}>
        <Text style={{ fontSize: 23 }}> This is Activity - 3 </Text>
      </View>
    );
  }
}

آموزش react native

10.ایجاد 3 Constant objects به نام های FirstActivity_StackNavigator, SecondActivity_StackNavigator و ThirdActivity_StackNavigator.درون هر کدوم از این ها کلاس HamburgerIcon رو فراخوانی میکنیم و به عنوان headerLeft برای DrawewerNavigator استفاده میکنیم.

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
const FirstActivity_StackNavigator = StackNavigator({
  First: {
    screen: MainActivity,
    navigationOptions: ({ navigation }) => ({
      title: 'MainActivity',
      headerLeft: <HamburgerIcon navigationProps={navigation} />,
      headerStyle: {
        backgroundColor: '#FF9800'
      },
      headerTintColor: '#fff',
    })
  },
});
const SecondActivity_StackNavigator = StackNavigator({
  Second: {
    screen: SecondActivity,
    navigationOptions: ({ navigation }) => ({
      title: 'SecondActivity',
      headerLeft: <HamburgerIcon navigationProps={navigation} />,
      headerStyle: {
        backgroundColor: '#FF9800'
      },
      headerTintColor: '#fff',
    })
  },
});
const ThirdActivity_StackNavigator = StackNavigator({
  Third: {
    screen: ThirdActivity,
    navigationOptions: ({ navigation }) => ({
      title: 'ThirdActivity',
      headerLeft: <HamburgerIcon navigationProps={navigation} />,
      headerStyle: {
        backgroundColor: '#FF9800'
      },
      headerTintColor: '#fff',
    })
  },

11.استفاده از DrawerNavigator  و فراخوانی object هایی که در بالا تعریف کردیم.

contentComponent : فراخوانی کلاس Custom_Side_Menu .

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
export default MyDrawerNavigator = DrawerNavigator({
  MainStack: {
    screen: FirstActivity_StackNavigator
  },
  SecondStack: {
    screen: SecondActivity_StackNavigator
  },
  ThirdStack: {
    screen: ThirdActivity_StackNavigator
  }
},
  {
    contentComponent: Custom_Side_Menu,
    drawerWidth: Dimensions.get('window').width - 130,
  });

12.ایجاد استایل سفارشی.

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
const styles = StyleSheet.create({
  MainContainer: {
    flex: 1,
    paddingTop: (Platform.OS) === 'ios' ? 20 : 0,
    alignItems: 'center',
    justifyContent: 'center',
  },
  sideMenuContainer: {
    width: '100%',
    height: '100%',
    backgroundColor: '#fff',
    alignItems: 'center',
    paddingTop: 20
  },
  sideMenuProfileIcon:
  {
    resizeMode: 'center',
    width: 150,
    height: 150,
    borderRadius: 150/2
  },
  sideMenuIcon:
  {
    resizeMode: 'center',
    width: 28,
    height: 28,
    marginRight: 10,
    marginLeft: 20
    
  },
  menuText:{
    fontSize: 15,
    color: '#222222',
    
  }
});

13.کد کامل برنامه در فایل 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
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
import React, { Component } from 'react';
import { StyleSheet, Platform, View, Text, Image, TouchableOpacity, YellowBox, Dimensions } from 'react-native';
import { DrawerNavigator } from 'react-navigation';
import { StackNavigator } from 'react-navigation'
class HamburgerIcon extends Component {
  toggleDrawer = () => {
    console.log(this.props.navigationProps);
    this.props.navigationProps.toggleDrawer();
  }
  render() {
    return (
      <View style={{ flexDirection: 'row' }}>
        <TouchableOpacity onPress={this.toggleDrawer.bind(this)} >
          <Image
            source={{ uri: 'https://reactnativecode.com/wp-content/uploads/2018/04/hamburger_icon.png' }}
            style={{ width: 25, height: 25, marginLeft: 5 }}
          />
        </TouchableOpacity>
      </View>
    );
  }
}
class Custom_Side_Menu extends Component {
render() {
return (
<View style={styles.sideMenuContainer}>
<Image source={{ uri: 'https://reactapp.ir/wp-content/uploads/Guitar.jpg' }}
style={styles.sideMenuProfileIcon} />
<View style={{ width: '100%', height: 1, backgroundColor: '#e2e2e2', marginTop: 15}} />
<View style={{width: '100%'}}>
<View style={{flexDirection: 'row', alignItems: 'center', marginTop: 10}}>
<Image source={{ uri: 'https://reactapp.ir/wp-content/uploads/social.jpg' }}
style={styles.sideMenuIcon} />
<Text style={styles.menuText} onPress={() => { this.props.navigation.navigate('First') }} > First Activity </Text>
</View>
<View style={{flexDirection: 'row', alignItems: 'center', marginTop: 10}}>
<Image source={{ uri: 'https://reactnativecode.com/wp-content/uploads/2018/08/promotions.jpg' }}
style={styles.sideMenuIcon} />
<Text style={styles.menuText} onPress={() => { this.props.navigation.navigate('Second') }} > Second Activity </Text>
</View>
<View style={{flexDirection: 'row', alignItems: 'center', marginTop: 10}}>
<Image source={{ uri: 'https://reactapp.ir/wp-content/uploads/outbox.jpg' }}
style={styles.sideMenuIcon} />
<Text style={styles.menuText} onPress={() => { this.props.navigation.navigate('Third') }} > Third Activity </Text>
</View>
</View>
<View style={{ width: '100%', height: 1, backgroundColor: '#e2e2e2', marginTop: 15}} />
</View>
);
}
}
class MainActivity extends Component {
  constructor(props) {
    super(props);
    YellowBox.ignoreWarnings([
      'Warning: componentWillMount is deprecated',
      'Warning: componentWillReceiveProps is deprecated',
    ]);
  }
  render() {
    return (
      <View style={styles.MainContainer}>
        <Text style={{ fontSize: 23 }}> This is Activity - 1 </Text>
      </View>
    );
  }
}
class SecondActivity extends Component {
  constructor(props) {
    super(props);
    YellowBox.ignoreWarnings([
      'Warning: componentWillMount is deprecated',
      'Warning: componentWillReceiveProps is deprecated',
    ]);
  }
  render() {
    return (
      <View style={styles.MainContainer}>
        <Text style={{ fontSize: 23 }}> This is Activity - 2 </Text>
      </View>
    );
  }
}
class ThirdActivity extends Component {
  constructor(props) {
    super(props);
    YellowBox.ignoreWarnings([
      'Warning: componentWillMount is deprecated',
      'Warning: componentWillReceiveProps is deprecated',
    ]);
  }
  render() {
    return (
      <View style={styles.MainContainer}>
        <Text style={{ fontSize: 23 }}> This is Activity - 3 </Text>
      </View>
    );
  }
}
const FirstActivity_StackNavigator = StackNavigator({
  First: {
    screen: MainActivity,
    navigationOptions: ({ navigation }) => ({
      title: 'MainActivity',
      headerLeft: <HamburgerIcon navigationProps={navigation} />,
      headerStyle: {
        backgroundColor: '#FF9800'
      },
      headerTintColor: '#fff',
    })
  },
});
const SecondActivity_StackNavigator = StackNavigator({
  Second: {
    screen: SecondActivity,
    navigationOptions: ({ navigation }) => ({
      title: 'SecondActivity',
      headerLeft: <HamburgerIcon navigationProps={navigation} />,
      headerStyle: {
        backgroundColor: '#FF9800'
      },
      headerTintColor: '#fff',
    })
  },
});
const ThirdActivity_StackNavigator = StackNavigator({
  Third: {
    screen: ThirdActivity,
    navigationOptions: ({ navigation }) => ({
      title: 'ThirdActivity',
      headerLeft: <HamburgerIcon navigationProps={navigation} />,
      headerStyle: {
        backgroundColor: '#FF9800'
      },
      headerTintColor: '#fff',
    })
  },
});
export default MyDrawerNavigator = DrawerNavigator({
  MainStack: {
    screen: FirstActivity_StackNavigator
  },
  SecondStack: {
    screen: SecondActivity_StackNavigator
  },
  ThirdStack: {
    screen: ThirdActivity_StackNavigator
  }
},
  {
    contentComponent: Custom_Side_Menu,
    drawerWidth: Dimensions.get('window').width - 130,
  });
const styles = StyleSheet.create({
  MainContainer: {
    flex: 1,
    paddingTop: (Platform.OS) === 'ios' ? 20 : 0,
    alignItems: 'center',
    justifyContent: 'center',
  },
  sideMenuContainer: {
    width: '100%',
    height: '100%',
    backgroundColor: '#fff',
    alignItems: 'center',
    paddingTop: 20
  },
  sideMenuProfileIcon:
  {
    resizeMode: 'center',
    width: 150,
    height: 150,
    borderRadius: 150/2
  },
  sideMenuIcon:
  {
    resizeMode: 'center',
    width: 28,
    height: 28,
    marginRight: 10,
    marginLeft: 20
    
  },
  menuText:{
    fontSize: 15,
    color: '#222222',
    
  }
});

اسکرین شات : 

آموزش React Native

 

 

آموزش react native

 

آموزش react native

 

آموزش react native

 

 

اشتراک گذاری:
برچسب ها: آموزش react nativeآموزش react navigationآموزش فارسی react nativeری اکت نیتیو

مطالب زیر را حتما مطالعه کنید

timeline in react native

ایجاد Timeline ListView در React Native

آموزش react navigation

آموزش React Navigation 5

ارسال sms در react native

ارسال sms از طریق اپلیکیشن در react native

آموزش react native

رمزگذاری و رمزگشایی password در react native

پیاده سازی reacaptcha در react native

پیاده سازی reCaptcha در react native

اموزش فارسی react native

کتابخانه react-native-draggable-flatlist

قدیمی تر ارسال پارامتر به کامپوننت ها در React Native
جدیدتر نکاتی در مورد طراحی رابط کاربری (UI)

4 دیدگاه

به گفتگوی ما بپیوندید و دیدگاه خود را با ما در میان بگذارید.

  • مریم گفت:
    دسامبر 27, 2018 در 2:10 ب.ظ

    سلام . تشکر
    من از این مقاله استفاده کردم ولی الان دکمه back گوشی به صفحه قبلی بر نمیگرده و به صفحه اول برمیگرده . شما روشی برای حل این مشکل دارین ؟ خیلی کارم فوری هست بی زحمت پاسخ بدین

    پاسخ
    • علیرضا گفت:
      دسامبر 29, 2018 در 9:40 ق.ظ

      سلام.
      برای این کار کافیه که تو goback اسم کامپوننت رو قرار بدید

      پاسخ
  • rezamasrori گفت:
    آگوست 27, 2018 در 8:15 ب.ظ

    شما بی نظرین من خیلی از این سایت چیزایی خوبی یاد گرفتم ممنونم میشم همین طوری اطلاعات در اختیار ما هم بذارین
    خیلی خیلی ممنونم

    لطفا ادامه بدین هر روز ما منتظر هستیم

    پاسخ
    • مهدی گفت:
      آگوست 28, 2018 در 10:11 ق.ظ

      ممنون از لطف و انرژی مثبتتون.
      همین انرژی و انگیزه ای که به ما میدین باعث ادامه کار میشه

      پاسخ

دیدگاهتان را بنویسید لغو پاسخ

جستجو
جستجو برای:
دسته‌ها
  • Material UI
  • NodeJS
  • React
  • React Native
  • Vue Js
  • آموزش متنی
  • استارت آپ و آموزش
  • برنامه نویسی
  • جاوااسکریپت
  • گپ و گفت
ارتباط با ما
  • 09150274110
  • contact@reactapp.ir
دسترسی سریع
  • بلاگ
  • تله فیلم آموزشی
  • آموزش متنی
  • قوانین

تیم reactapp تمام تلاش خودش رو انجام میده تا محتوایی با کیفیت و به روز رو در اختیار علاقه مندان به حوزه جاوااسکریپت قرار بده. چیدمان تمامی آموزش های ویدئویی و مقالات به نحوی هست که شمارو به سمت بازار کار سوق بده تا هر چه سریع تر به عنوان یک نیرو فنی در بازار کار مشغول به فعالیت شده و به درآمد زایی برسید.

کلیه حقوق این سایت محفوظ و متعلق به reactapp.ir میباشد.

ورود

رمز عبور را فراموش کرده اید؟

هنوز عضو نشده اید؟ عضویت در سایت