import { 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';<\/code><\/pre>\n\n\n\n-\ud0ed\ub124\ube44\uac8c\uc774\ud130\ub97c \uc0dd\uc131\ud558\ub294 \ubd80\ubd84\uc785\ub2c8\ub2e4.
This is the part that creates the tab navigator.<\/p>\n\n\n\n
{Tab1}\uc740 const Tab1 = () =>{ } \ud568\uc218\ub97c \uc758\ubbf8\ud569\ub2c8\ub2e4.
{Tab1} means “const Tab1 = () => { }” function.<\/p>\n\n\n\n
{Tab2}\ub294 const Tab2 = () => { } \ud568\uc218\ub97c \uc758\ubbf8\ud569\ub2c8\ub2e4.
{Tab2} means “const Tab2 = () => { }” function.<\/p>\n\n\n\n
options\uc601\uc5ed\uc5d0\ub294 \ud0ed\ubc14 \ub77c\ubca8\uacfc \uc544\uc774\ucf58\uc5d0 \ub300\ud55c \uc124\uc815\uc785\ub2c8\ub2e4.
The options area contains settings for the tab bar label and icon.<\/p>\n\n\n\n
-Icon “Home”<\/p>\n\n\n\n
<Icon name=\"home\" color={ color } size={ size } \/><\/code><\/pre>\n\n\n\n-Icon “bag-add”<\/p>\n\n\n\n
<Icon name=\"bag-add\" color={ color } size={ size } \/><\/code><\/pre>\n\n\n\n-BottomTabNavigator<\/p>\n\n\n\n
\nconst Tab = createBottomTabNavigator();\nconst BottomTabNavigator = () => {\n return (\n <Tab.Navigator screenOptions={{ headerShown: true }}>\n <Tab.Screen name=\"Tab1\"<\/strong> component={Tab1} <\/strong>\n options={{\n tabBarLabel: 'Home',<\/strong>\n tabBarIcon: ({ color, size }) => (\n <Icon name=\"home\" color={ color } size={ size } \/><\/strong>\n ),\n }} \n \/>\n <Tab.Screen name=\"Tab2\"<\/strong> component={Tab2}<\/strong>\n \n options={{\n tabBarLabel: 'Tab2',<\/strong>\n tabBarIcon: ({ color, size }) => (\n <Icon name=\"bag-add\" color={ color } size={ size } \/><\/strong>\n ),\n }} \n \/> \n <\/Tab.Navigator>\n );\n}\n<\/code><\/pre>\n\n\n\n3.\uc804\uccb4\ucf54\ub4dc(full code)<\/strong><\/p>\n\n\n\n-App.js<\/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}\n<\/code><\/pre>\n\n\n\n-BottomTabNavigator.js<\/p>\n\n\n\n
\/\/ App1\/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<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"\uc774 \ud3ec\uc2a4\ud2b8\ub294 Tab navigator\uc0ac\uc6a9\ud558\uae30\uc5d0 \ub300\ud55c \ucf54\ub4dc \uc124\uba85\uc785\ub2c8\ub2e4.This post is a code explanation for using the Tab navigator. \ud55c\ubc88 \ubcf4\uc2dc\uba74 \ud06c\uac8c \uc774\ud574\ud558\uae30 \uc5b4\ub824\uc6b4 \ubd80\ubd84\uc740 \uc5c6\ub2e4\uace0 \uc0dd\uac01\ub429\ub2c8\ub2e4.If you take a look, I don’t think there is anything that is very difficult to understand. \uc774\uc804\ud3ec\uc2a4\ud2b8(previous post) [ReactNative]\ud0ed\ub124\ube44\uac8c\uc774\ud130 \uc0ac\uc6a9\ud558\uae30 \/ Using Tab Navigator 1.App.js-\uc124\uce58\ud55c \ubaa8\ub4c8\uc744 \ucd94\uac00\ud558\ub294 \ubd80\ubd84\uc785\ub2c8\ub2e4.This is 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-971","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\/971","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=971"}],"version-history":[{"count":9,"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/posts\/971\/revisions"}],"predecessor-version":[{"id":984,"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/posts\/971\/revisions\/984"}],"wp:attachment":[{"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/media?parent=971"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/categories?post=971"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/tags?post=971"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}