[React-native] Expo를 이용한 웹개발(Web)

Dependencies

1. Web : Iframe을 이용한 개발

$ yarn add react-native-youtube-iframe

* Android의 경우 webview를 사용해서 웹 페이지를 띄울 수 있으나, 웹 플랫폼에서는 webview가 지원하지 않는다.

* 만약 Android 환경에서 개발할 경우 webview 사용시 참고

$ expo install react-native-webview
$ yarn add --save react-native link react-native-webview

 

2. Stack Navigator 및 Bottom Tab

$ yarn add expo-status-bar
$ yarn add react-native-reanimated
$ yarn add react-native-screens
$ yarn add react-native-safe-area-context
$ yarn add react-native-gesture-handler
$ yarn add react-native-pager-view
$ yarn add @react-native-community/masked-view
$ yarn add @react-native-masked-view/masked-view
$ yarn add @react-navigation/stack
$ yarn add @react-navigation/drawer
$ yarn add @react-navigation/bottom-tabs
$ yarn add @react-navigation/material-top-tabs
$ npx expo install react-native-pager-view

일괄 설치 코드
$ yarn add expo-status-bar react-native-reanimated react-native-screens react-native-safe-area-context react-native-gesture-handler react-native-pager-view @react-native-community/masked-view @react-native-masked-view/masked-view @react-navigation/stack @react-navigation/drawer @react-navigation/bottom-tabs @react-navigation/material-top-tabs
$ npx expo install react-native-pager-view

---

Bottom Tab Layout

import React, {useEffect, useState} from "react";

import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";

import { createStackNavigator } from "@react-navigation/stack";

import { MaterialCommunityIcons } from '@expo/vector-icons';

import uyouboodan from '../pages/uyouboodanPage';

/**

 * BotTab + Stack Navigator 라이브러리 선언

 */

const tabStack = createBottomTabNavigator();

const webViewStack = createStackNavigator();

/**

 * 추가할 스크린 선언부

 */

/**

 * 1. webView 사용시

 */

const webViewStackScreen = () => {

    return (

        <webViewStack.Navigator>

            <webViewStack.Screen

                name = "uyouboodan"

                component = {uyouboodan}

                options = {{ headerShown: false }}

            />

        </webViewStack.Navigator>

    );

};

/**

 * 실질적인 Bot-Tab 레이아웃 (StackNavigation 동시적용 됨)

 * 화면 추가시, TabStack.Screen 태그를 사용해 추가. component 부분에 선언해둔 원하는 Screen의 변수명을 입력

 * <TabStack.Screen name = "설정할_스크린_이름"

                            component = { 선언해둔_스크린_변수명 }

                            options = {{ tabBarLabel : "원하는_탭바_라벨명", tabBarIcon : ({ color, size }) =>

                                (<MaterialCommunityIcons name = "account" color = { color } size = { size } />)

                            }}/>

 */

const tabStackScreen = () => {

    return (

        <tabStack.Navigator screenOption = {{ tabBarActiveTintColor: '#eb4b4b', headerShown: true }}

                                                backBehavior = "history"

                                                initialRouteName = "uyouboodan"

                                                sceneContainerStyle = {{ marginTop : 30 }}>

            <tabStack.Screen name = "uyouboodan"

                            component = {webViewStackScreen}

                            options = {{ tabBarLabel : "uyouboodan", tabBarIcon : ({ color, size }) =>

                                        (<MaterialCommunityIcons name = "account" color = { color } size = { size } />)

                            }}/>

        </tabStack.Navigator>

    );

};

                           

export default tabStackScreen;

---

Page Code

import React, { useRef, useState } from "react";

import { BackHandler, View, Text } from "react-native";

import { useNavigation } from "@react-navigation/core";

import { useFocusEffect } from "@react-navigation/native";

import { WebView } from "react-native-webview";

const INJECTED_JAVASCRIPT = `(function() {

    AsyncStorage.setItem("memberCode", 1);

    AsyncStorage.setItem("isApp", true);

  })();`;

export default function uyouboodan({ url }) {

    const navigation = useNavigation();

    const webView = useRef(null);

    const [canGoBack, setCanGoBack] = useState(false);

    // Android's hardware back setting

    useFocusEffect(

        React.useCallback(() => {

            const onBackPress = () => {

                if (webView.current && canGoBack) {

                    webView.current.goBack();

                    return true;

                } else {

                    return false;

                }

            };

            BackHandler.addEventListener("hardwareBackPress", onBackPress);

            return() =>

                BackHandler.removeEventListener("hardwareBackPress", onBackPress);

        }, [canGoBack])

    );

    // Android's software back setting

    const backPress = (navState) => {

        const { canGoBack } = navState;

        if (canGoBack) {

            navigation.setParams({

                isCanBack: {

                    title: "",

                    onPress: () => webView.current.goBack(),

                },

            });

        } else {

            navigation.setParams({

                isCanBack: null,

            });

        }

    };

    // 실질적인 화면이 렌더링 되는 코드

    return (

            <div>

                <iframe src = "https://bit.ly/uyouboodan"

                        width="100%"

                        height="600"

                />

            </div>

    )

    /**

    * 웹뷰 사용시 코드

    */

    // return (

        // <WebView

        //     source={{

        //         uri: "https://bit.ly/uyouboodan",

        //     }}

        //     ref={webView}

        //     onNavigationStateChange={(navState) => {

        //         setCanGoBack(navState.canGoBack);

        //         backPress(navState);

        //     }}

        //     injectedJavaScript={INJECTED_JAVASCRIPT}

        //     onMessage={(event) => { }}

        // />  

    // )

}