[ReactNative]Tab navigator 코드설명 / Tab navigator code explanation

이 포스트는 Tab navigator사용하기에 대한 코드 설명입니다.
This post is a code explanation for using the Tab navigator.

한번 보시면 크게 이해하기 어려운 부분은 없다고 생각됩니다.
If you take a look, I don’t think there is anything that is very difficult to understand.

이전포스트(previous post)

[ReactNative]탭네비게이터 사용하기 / Using Tab Navigator

1.App.js
-설치한 모듈을 추가하는 부분입니다.
This is the part where you add the installed module.

import { NavigationContainer } from '@react-navigation/native';
import * as React from 'react';

-코드를 BottomTabNavigator.js파일로 만들어서 호출합니다.
Create the code in the BottomTabNavigator.js file and call it.

import BottomTabNavigator from './BottomTabNavigator';

BottomTabNavigator함수를 실행합니다.

export default function App() {
  return (
    <NavigationContainer>
      <BottomTabNavigator />
    </NavigationContainer>
  );
}

2.BottomTabNavigator.js

-설치한 모듈을 추가하는 부분입니다.
his is the part where you add the installed module.

-아이콘은 Ionicons,FontAwesome외에도 다른 아이콘을 사용 할 수도 있습니다.
You can also use icons other than Ionicons and FontAwesome.

https://www.npmjs.com/package/react-native-vector-icons

import { StatusBar,View,StyleSheet,Dimensions } from 'react-native';

// Tab Navigator
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';

// Ionicons
 import Icon from 'react-native-vector-icons/Ionicons';
 //import Icon from 'react-native-vector-icons/FontAwesome5';

//webview 
import { WebView } from 'react-native-webview';

-탭네비게이터를 생성하는 부분입니다.
This is the part that creates the tab navigator.

{Tab1}은 const Tab1 = () =>{ } 함수를 의미합니다.
{Tab1} means “const Tab1 = () => { }” function.

{Tab2}는 const Tab2 = () => { } 함수를 의미합니다.
{Tab2} means “const Tab2 = () => { }” function.

options영역에는 탭바 라벨과 아이콘에 대한 설정입니다.
The options area contains settings for the tab bar label and icon.

-Icon “Home”

<Icon name="home" color={ color } size={ size } />

-Icon “bag-add”

<Icon name="bag-add" color={ color } size={ size } />

-BottomTabNavigator

const Tab = createBottomTabNavigator();
const BottomTabNavigator = () => {
  return (
      <Tab.Navigator screenOptions={{ headerShown: true }}>
        <Tab.Screen name="Tab1" component={Tab1} 
                  options={{
                    tabBarLabel: 'Home',
                    tabBarIcon: ({ color, size }) => (
                    <Icon name="home" color={ color } size={ size } />
                    ),
                  }} 
        />
        <Tab.Screen name="Tab2" component={Tab2}
        
                  options={{
                    tabBarLabel: 'Tab2',
                    tabBarIcon: ({ color, size }) => (
                    <Icon name="bag-add" color={ color } size={ size } />
                    ),
                  }} 
        />        
      </Tab.Navigator>
  );
}

3.전체코드(full code)

-App.js

// App.js

import { NavigationContainer } from '@react-navigation/native';
import * as React from 'react';


// BottomTabNavigator.js file
import BottomTabNavigator from './BottomTabNavigator';

export default function App() {
  return (
    <NavigationContainer>
      <BottomTabNavigator />
    </NavigationContainer>
  );
  
}

-BottomTabNavigator.js

// App1/BottomTabNvigator.js

import { StatusBar,View,StyleSheet,Dimensions } from 'react-native';

// Tab Navigator
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';

// Ionicons
 import Icon from 'react-native-vector-icons/Ionicons';
 //import Icon from 'react-native-vector-icons/FontAwesome5';

//webview 
import { WebView } from 'react-native-webview';

// webview size
const windowWidth = Dimensions.get('window').width;
const windowHeight = Dimensions.get('window').height;

const Tab = createBottomTabNavigator();

const BottomTabNavigator = () => {
  return (
      <Tab.Navigator screenOptions={{ headerShown: true }}>
        <Tab.Screen name="Tab1" component={Tab1} 
                  options={{
                    tabBarLabel: 'Home',
                    tabBarIcon: ({ color, size }) => (
                    <Icon name="home" color={ color } size={ size } />
                    ),
                  }} 
        />
        <Tab.Screen name="Tab2" component={Tab2}
        
                  options={{
                    tabBarLabel: 'Tab2',
                    tabBarIcon: ({ color, size }) => (
                    <Icon name="bag-add" color={ color } size={ size } />
                    ),
                  }} 
        />        
      </Tab.Navigator>
  );
}
const Tab1 = () => {
    return (
      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
  
        <WebView style={styles.webview} 
          source={{ uri: 'https://freelifemakers.org' }} 
          allowsFullscreenVideo={true}
          allowsInlineMediaPlayback={true}
          javaScriptEnabled={true}
          scalesPageToFit={true}
          domStorageEnabled={true}
          mediaPlaybackRequiresUserAction={false}
        />
        <StatusBar
          barStyle="light-content" // Options: 'default', 'light-content', 'dark-content'
          backgroundColor="#6a51ae" // For Android
          hidden={false}            // Show or hide the status bar
          translucent={true}        // Allow content to render under the status bar
        />
        
      </View>
    );
  }

const Tab2 = () => {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
            
      <WebView style={styles.webview} 
               source={{ uri: 'https://freelifemakers.org/lec/list01.php' }} 
               allowsFullscreenVideo={true}
               allowsInlineMediaPlayback={true}
               javaScriptEnabled={true}
               scalesPageToFit={true}
               domStorageEnabled={true}
               mediaPlaybackRequiresUserAction={false}
      />
      <StatusBar
               barStyle="light-content" // Options: 'default', 'light-content', 'dark-content'
               backgroundColor="#6a51ae" // For Android
               hidden={false}            // Show or hide the status bar
               translucent={true}        // Allow content to render under the status bar
      />

    </View>
  );
}

  // webview style
const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    //justifyContent: 'space-between',
    justifyContent: 'center',
  },
  // webview size
  webview: {
    flex: 1,
    width: windowWidth,
    height: windowHeight,
  },
});

export default BottomTabNavigator