The tab navigator will look like the image below.<\/p>\n\n\n\n
![\"\"](\"https:\/\/www.freelifemakers.org\/wordpress\/wp-content\/uploads\/2024\/09\/tabNavigator.png\")
<\/figure>\n\n\n\n-\uc544\ub798\ub294 \uc571\uc758 \uc2e4\ud589 \ud654\uba74\uc785\ub2c8\ub2e4. 1.\ubaa8\ub4c8\uc124\uce58(install modules)<\/strong><\/p>\n\n\n\n 2.\ucf54\ub4dc \uc791\uc131 \/ Write cod<\/strong>e -App.js\ud30c\uc77c\uc5d0 \ub2e4\uc74c \ucf54\ub4dc\ub97c \uc791\uc131 \ud569\ub2c8\ub2e4. -BottomTabNavigator.js\ud30c\uc77c\uc744 \ub9cc\ub4e4\uace0 \ub2e4\uc74c \ucf54\ub4dc\ub97c \uc791\uc131\ud569\ub2c8\ub2e4. 4.npm run android<\/strong> 5.\uc804\uccb4 \ucf54\ub4dc(full code)<\/strong><\/p>\n\n\n\n -\uc774\ubc88 \ud3ec\uc2a4\ud2b8\uc5d0\uc11c \uc124\uba85\ud558\uc9c0 \ubabb\ud55c \ubd80\ubd84\uc740 \ub2e4\uc74c \ud3ec\uc2a4\ud2b8\uc5d0\uc11c \uc124\uba85\ud558\uaca0\uc2b5\ub2c8\ub2e4. -\ud0ed \ub124\ube44\uac8c\uc774\ud130\ub97c \uc0ac\uc6a9\ud558\ub294 \ubc29\ubc95\uc5d0 \ub300\ud55c \uc124\uba85\uc785\ub2c8\ub2e4.Here’s an explanation of how to use the tab navigator. -\ud0ed \ub124\ube44\uac8c\uc774\ud130\ub294 \uc571\uc5d0\uc11c \uc0ac\uc6a9\uac00\ub2a5\ud55c \uba54\ub274\uc758 \ud55c \uc885\ub958 \uc785\ub2c8\ub2e4.Tab navigator is a type of menu available in apps. -\ud0ed \ub124\ube44\uac8c\uc774\ud130\ub294 \uc571\uc758 \ud558\ub2e8\uc5d0 \ud0ed\uc744 \ud560\ub54c \ud654\uba74 \uc804\ud658\uc744 \ud560 \uc218 \uc788\ub3c4\ub85d \ub3c4\uc640\uc90d\ub2c8\ub2e4.The tab navigator helps you switch screens when you tap at the […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5,1],"tags":[],"class_list":["post-957","post","type-post","status-publish","format-standard","hentry","category-reactnative","category-uncategorized","missing-thumbnail"],"_links":{"self":[{"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/posts\/957","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/comments?post=957"}],"version-history":[{"count":4,"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/posts\/957\/revisions"}],"predecessor-version":[{"id":970,"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/posts\/957\/revisions\/970"}],"wp:attachment":[{"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/media?parent=957"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/categories?post=957"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/tags?post=957"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
Below is the app launch screen.<\/p>\n\n\n\n![\"\"](\"https:\/\/www.freelifemakers.org\/wordpress\/wp-content\/uploads\/2024\/09\/screen1-461x1024.jpg\"){kind=spacer}
<\/figure>\n\n\n\n![\"\"](\"https:\/\/www.freelifemakers.org\/wordpress\/wp-content\/uploads\/2024\/09\/screen2-461x1024.jpg\"){kind=spacer}
<\/figure>\n<\/figure>\n\n\n\n\n
To use the tab navigator, you need to install the module<\/li>\n<\/ul>\n\n\n\n\n
The modules you need to install for the tab navigator are:<\/li>\n<\/ul>\n\n\n\n@react-navigation\/bottom-tabs\n@react-navigation\/native\nreact-native-safe-area-context\nreact-native-screens<\/code><\/pre>\n\n\n\n\n
“@react-navigation\/bottom-tabs ” This module is the tab navigator module.<\/li>\n<\/ul>\n\n\n\n\n
The remaining modules are not directly related to the tab navigator, but will cause errors if you don’t install them.<\/li>\n<\/ul>\n\n\n\n\n
So, you must install the remaining modules as well.<\/li>\n<\/ul>\n\n\n\n\n
Icons are used in the tab navigator. Also install modules for icons.<\/li>\n<\/ul>\n\n\n\nreact-native-vector-icons<\/code><\/pre>\n\n\n\n\n
This is the entire module used to run this app.<\/li>\n<\/ul>\n\n\n\n![\"\"](\"https:\/\/www.freelifemakers.org\/wordpress\/wp-content\/uploads\/2024\/09\/package_json.png\")
<\/figure>\n\n\n\n
-\uc774 \uc571\uc758 \ub514\ub809\ud1a0\ub9ac \uad6c\uc870\uc785\ub2c8\ub2e4.
This is the directory structure for this app<\/p>\n\n\n\n![\"\"](\"https:\/\/www.freelifemakers.org\/wordpress\/wp-content\/uploads\/2024\/09\/directory.png\")
<\/figure>\n\n\n\n
Write the following code in the App.js file.<\/p>\n\n\n\n![\"\"](\"https:\/\/www.freelifemakers.org\/wordpress\/wp-content\/uploads\/2024\/09\/App1_js-1.png\")
<\/figure>\n\n\n\n
Create a BottomTabNavigator.js file and write the following code.<\/p>\n\n\n\n![\"\"](\"https:\/\/www.freelifemakers.org\/wordpress\/wp-content\/uploads\/2024\/09\/BottomTabNavigator_js.png\")
<\/figure>\n\n\n\n
-npm run android\uba85\ub839\uc73c\ub85c \ub514\ubc84\uae45\uc744 \uc2e4\ud589\ud569\ub2c8\ub2e4.
Execute debugging with the “npm run android” command.<\/p>\n\n\n\n
Anything that was not explained in this post will be explained in the next post.<\/p>\n\n\n\n\/\/ App.js\n\nimport { NavigationContainer } from '@react-navigation\/native';\nimport * as React from 'react';\n\n\n\/\/ BottomTabNavigator.js file\nimport BottomTabNavigator from '.\/BottomTabNavigator';\n\nexport default function App() {\n return (\n <NavigationContainer>\n <BottomTabNavigator \/>\n <\/NavigationContainer>\n );\n \n}<\/code><\/pre>\n\n\n\n\/\/ BottomTabNvigator.js\n\nimport { StatusBar,View,StyleSheet,Dimensions } from 'react-native';\n\n\/\/ Tab Navigator\nimport { createBottomTabNavigator } from '@react-navigation\/bottom-tabs';\n\n\/\/ Ionicons\n import Icon from 'react-native-vector-icons\/Ionicons';\n \/\/import Icon from 'react-native-vector-icons\/FontAwesome5';\n\n\/\/webview \nimport { WebView } from 'react-native-webview';\n\n\/\/ webview size\nconst windowWidth = Dimensions.get('window').width;\nconst windowHeight = Dimensions.get('window').height;\n\nconst Tab = createBottomTabNavigator();\n\nconst BottomTabNavigator = () => {\n return (\n <Tab.Navigator screenOptions={{ headerShown: true }}>\n <Tab.Screen name=\"Tab1\" component={Tab1} \n options={{\n tabBarLabel: 'Home',\n tabBarIcon: ({ color, size }) => (\n <Icon name=\"home\" color={ color } size={ size } \/>\n ),\n }} \n \/>\n <Tab.Screen name=\"Tab2\" component={Tab2}\n \n options={{\n tabBarLabel: 'Tab2',\n tabBarIcon: ({ color, size }) => (\n <Icon name=\"bag-add\" color={ color } size={ size } \/>\n ),\n }} \n \/> \n <\/Tab.Navigator>\n );\n}\nconst Tab1 = () => {\n return (\n <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>\n \n <WebView style={styles.webview} \n source={{ uri: 'https:\/\/freelifemakers.org' }} \n allowsFullscreenVideo={true}\n allowsInlineMediaPlayback={true}\n javaScriptEnabled={true}\n scalesPageToFit={true}\n domStorageEnabled={true}\n mediaPlaybackRequiresUserAction={false}\n \/>\n <StatusBar\n barStyle=\"light-content\" \/\/ Options: 'default', 'light-content', 'dark-content'\n backgroundColor=\"#6a51ae\" \/\/ For Android\n hidden={false} \/\/ Show or hide the status bar\n translucent={true} \/\/ Allow content to render under the status bar\n \/>\n \n <\/View>\n );\n }\n\nconst Tab2 = () => {\n return (\n <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>\n \n <WebView style={styles.webview} \n source={{ uri: 'https:\/\/freelifemakers.org\/lec\/list01.php' }} \n allowsFullscreenVideo={true}\n allowsInlineMediaPlayback={true}\n javaScriptEnabled={true}\n scalesPageToFit={true}\n domStorageEnabled={true}\n mediaPlaybackRequiresUserAction={false}\n \/>\n <StatusBar\n barStyle=\"light-content\" \/\/ Options: 'default', 'light-content', 'dark-content'\n backgroundColor=\"#6a51ae\" \/\/ For Android\n hidden={false} \/\/ Show or hide the status bar\n translucent={true} \/\/ Allow content to render under the status bar\n \/>\n\n <\/View>\n );\n}\n\n \/\/ webview style\nconst styles = StyleSheet.create({\n container: {\n flex: 1,\n alignItems: 'center',\n \/\/justifyContent: 'space-between',\n justifyContent: 'center',\n },\n \/\/ webview size\n webview: {\n flex: 1,\n width: windowWidth,\n height: windowHeight,\n },\n});\n\nexport default BottomTabNavigator\n<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"