نمایش Tab Navigator درون Drawer Navigator
TabNavigator درون DrawerNavigtor در صدها اپلیکیشن موبایل زمانی که دولوپر قصد داره چنیدین اسکرین رو در یک صفحه مدیریت کنه استفاده میشه.TabNavigator تمامی screenها رو در یک صفحه نمایش میده و با ویژگی animated swipeable بین screen های موجود در Tab میتونیم جابه جا بشیم.Drawer Navigator یک slide menu هست که در سمت چپ یا راست قرار میگیره و با کلیک بر روی آیکون همبرگر ما به لیست این اسکرین ها دسترسی پیدا میکنیم.
نمونه اپلیکیشنی که قرار در این آموزش متنی طراحی کنیم:
1. در اولین مرحله باید کتابخانه React Navigation رو نصب کنیم که نحوه نصب این کتابخانه رو من قبلا در یک آموزش متنی با عنوان شروع کار با React Navigation 3 آموزش دادم و برای نصب میتونید از این آموزش متنی کمک بگیرید.
2.ایمپورت کردن کامپوننت های StyleSheet, Text, View, Button, TouchableOpacity و Image در فایل App.js
|
1 2 3 |
import React, { Component } from 'react'; import { StyleSheet, Text, View, Button, TouchableOpacity, Image } from 'react-native'; |
3.ایمپورت کامپوننت های createAppContainer, createMaterialTopTabNavigator, createDrawerNavigator و createStackNavigator در فایل App.js
createAppContainer : این کامپوننت بصورت default یا پیش فرض export میشه به این معنی که اگر شما از Tab Navigatorیا Drawer navigator یا Stack Navigator در پروژتون استفاده کنید در نهایت باید با createAppContainer فراخوانیش کنید.
createMaterialTopTabNavigator : برای ایجاد یک Tab Navigation با استایل Material استفاده میشه.
createDrawerNavigator :برای ایجاد یک navigational drawer استفاده میشه.
|
1 |
import { createAppContainer, createMaterialTopTabNavigator, createDrawerNavigator, createStackNavigator } from "react-navigation"; |
4.ایجاد یک کلاس به نام HamburgerIcon .این کلاس آیکون Hamburger رو در بالا سمت چپ Drawer Navigator قرار میده.
this.props.navigationProps.toggleDrawer() : این تابع در رویدادclick آیکون Hamburger به منظور بازشدن و بسته شدن Drawer فراخوانی میشه.
|
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 |
class HamburgerIcon extends Component { toggleDrawer = () => { 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> ); } } |
5.ایجاد دو کلاس به نام های Home_Screen و Settings_Screen.این کلاس ها درون Tab Navigator نمایش داده می شوند.
|
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 |
class Home_Screen extends Component { static navigationOptions = { title: 'Home', }; 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 Settings_Screen extends Component { static navigationOptions = { title: 'Settings', }; render() { return ( <View style={styles.MainContainer}> <Text style={styles.text}>This is Settings Screen Activity.</Text> </View> ); } } |
6.ایجاد دو کلاس دیگر به نام های Student_Screen و Details_Screen. این کلاس ها نیز درون Tab Navigator نمایش داده می شوند
|
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 |
class Student_Screen extends Component { static navigationOptions = { title: 'Student', }; gotoNextActivity = () => { this.props.navigation.navigate('Forth'); } render() { return ( <View style={styles.MainContainer}> <Text style={styles.text}>This is Student Screen Activity.</Text> <Button onPress={this.gotoNextActivity} title='Open Details Activity' /> </View> ); } } class Details_Screen extends Component { static navigationOptions = { title: 'Details Screen', }; gotoNextActivity = () => { this.props.navigation.navigate('Second'); } render() { return ( <View style={styles.MainContainer}> <Text style={styles.text}>This is Details Screen Activity.</Text> </View> ); } } |
7.ایجاد یک constant view به نام Tab_1 با کامپوننت createMaterialTopTabNavigator و پاس دادن کلاس های Home_Screen و Settings_Screen درون آن.
|
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 |
export const Tab_1 = createMaterialTopTabNavigator({ First: { screen: Home_Screen, }, Second: { screen: Settings_Screen, } }, { tabBarPosition: 'top', swipeEnabled: true, tabBarOptions: { activeTintColor: '#fff', pressColor: '#004D40', inactiveTintColor: '#fff', style: { backgroundColor: '#00B8D4' }, labelStyle: { fontSize: 16, fontWeight: '200' } } }); |
8.ایجاد یک constant view دیگه به نام Tab_2 با کامپوننت createMaterialTopTabNavigator و پاس دادن کلاس های Student_Screen, Details_Screen درون آن.
|
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 |
export const Tab_2 = createMaterialTopTabNavigator({ Third: { screen: Student_Screen, }, Forth: { screen: Details_Screen, } }, { tabBarPosition: 'top', swipeEnabled: true, tabBarOptions: { activeTintColor: '#fff', pressColor: '#004D40', inactiveTintColor: '#fff', style: { backgroundColor: '#00B8D4' }, labelStyle: { fontSize: 16, fontWeight: '200' } } }); |
9.در این مرحله هر دو View های Tab_1 و Tab_2 رو به createStackNavigator پاس میدیم.این کار باعث میشه تا Tab Navigator به صورت کامل درون Stack navigator قرار بگیره.بنابراین دوتا createStackNavigator با نام های First_2_Tabs و Second_2_Tabs ایجاد میکنیم.
|
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 |
const First_2_Tabs = createStackNavigator({ First: { screen: Tab_1, navigationOptions: ({ navigation }) => ({ title: 'First Screen', headerLeft: <HamburgerIcon navigationProps={navigation} />, headerStyle: { backgroundColor: '#00B8D4', elevation: 0, // remove shadow on Android shadowOpacity: 0, // remove shadow on iOS }, headerTintColor: '#fff', }) }, }); const Second_2_Tabs = createStackNavigator({ First: { screen: Tab_2, navigationOptions: ({ navigation }) => ({ title: 'Second Screen', headerLeft: <HamburgerIcon navigationProps={navigation} />, headerStyle: { backgroundColor: '#00B8D4', elevation: 0, // remove shadow on Android shadowOpacity: 0, // remove shadow on iOS }, headerTintColor: '#fff', }) }, }); |
10.ایجاد یک constant با نام MyDrawerNavigator با کامپوننت createDrawerNavigator و پاس دادن First_2_Tabs و Second_2_Tabs درون آن.حالا در آخرین مرجله نیازه که MyDrawerNavigator رو به کامپوننت createAppContainer پاس بدیم.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
const MyDrawerNavigator = createDrawerNavigator({ Home_Menu_Label: { screen: First_2_Tabs, }, Student_Menu_Label: { screen: Second_2_Tabs, } }); export default createAppContainer(MyDrawerNavigator); |
11.ایجاد استایل
|
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 }, }); |
12.کد کامل برنامه در فایل 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 |
import React, { Component } from 'react'; import { StyleSheet, Text, View, Button, TouchableOpacity, Image } from 'react-native'; import { createAppContainer, createMaterialTopTabNavigator, createDrawerNavigator, createStackNavigator } from "react-navigation"; class HamburgerIcon extends Component { toggleDrawer = () => { 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 Home_Screen extends Component { static navigationOptions = { title: 'Home', }; 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 Settings_Screen extends Component { static navigationOptions = { title: 'Settings', }; render() { return ( <View style={styles.MainContainer}> <Text style={styles.text}>This is Settings Screen Activity.</Text> </View> ); } } class Student_Screen extends Component { static navigationOptions = { title: 'Student', }; gotoNextActivity = () => { this.props.navigation.navigate('Forth'); } render() { return ( <View style={styles.MainContainer}> <Text style={styles.text}>This is Student Screen Activity.</Text> <Button onPress={this.gotoNextActivity} title='Open Details Activity' /> </View> ); } } class Details_Screen extends Component { static navigationOptions = { title: 'Details Screen', }; gotoNextActivity = () => { this.props.navigation.navigate('Second'); } render() { return ( <View style={styles.MainContainer}> <Text style={styles.text}>This is Details Screen Activity.</Text> </View> ); } } export const Tab_1 = createMaterialTopTabNavigator({ First: { screen: Home_Screen, }, Second: { screen: Settings_Screen, } }, { tabBarPosition: 'top', swipeEnabled: true, tabBarOptions: { activeTintColor: '#fff', pressColor: '#004D40', inactiveTintColor: '#fff', style: { backgroundColor: '#00B8D4' }, labelStyle: { fontSize: 16, fontWeight: '200' } } }); export const Tab_2 = createMaterialTopTabNavigator({ Third: { screen: Student_Screen, }, Forth: { screen: Details_Screen, } }, { tabBarPosition: 'top', swipeEnabled: true, tabBarOptions: { activeTintColor: '#fff', pressColor: '#004D40', inactiveTintColor: '#fff', style: { backgroundColor: '#00B8D4' }, labelStyle: { fontSize: 16, fontWeight: '200' } } }); const First_2_Tabs = createStackNavigator({ First: { screen: Tab_1, navigationOptions: ({ navigation }) => ({ title: 'First Screen', headerLeft: <HamburgerIcon navigationProps={navigation} />, headerStyle: { backgroundColor: '#00B8D4', elevation: 0, // remove shadow on Android shadowOpacity: 0, // remove shadow on iOS }, headerTintColor: '#fff', }) }, }); const Second_2_Tabs = createStackNavigator({ First: { screen: Tab_2, navigationOptions: ({ navigation }) => ({ title: 'Second Screen', headerLeft: <HamburgerIcon navigationProps={navigation} />, headerStyle: { backgroundColor: '#00B8D4', elevation: 0, // remove shadow on Android shadowOpacity: 0, // remove shadow on iOS }, headerTintColor: '#fff', }) }, }); const MyDrawerNavigator = createDrawerNavigator({ Home_Menu_Label: { screen: First_2_Tabs, }, Student_Menu_Label: { screen: Second_2_Tabs, } }); export default createAppContainer(MyDrawerNavigator); const styles = StyleSheet.create({ MainContainer: { flex: 1, justifyContent: 'center', backgroundColor: '#f5fcff', padding: 11 }, text: { fontSize: 22, color: '#000', textAlign: 'center', marginBottom: 10 }, }); |
اسکرین شات:
پاسخی بگذارید