리액트 네이티브 Expo를 이용한 생성, 관리 (2)

이제 vscode에서 수정해야 하는 코드와 설정하는 방법을 설명하겠다.

 

기본적으로 vscode를 설치한 폴더를 선택하여 실행하고 필수 pakage를 추가하고 나면 

이러한 구성으로 되어있을것이다.

 

여기서 App.js 코드를

import { NavigationContainer } from '@react-navigation/native';
import MyTabs from './MyTabs';

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

 

로 수정해준다.

 

그리고 MyTabs.js라는 파일을 만들고

import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
import React, { useState, useRef } from "react";
import {
  SafeAreaView,
  StyleSheet,
  Text,
  StatusBar,
  Platform,
} from "react-native";
import { useFocusEffect } from "@react-navigation/native";
import { Feather, FontAwesome5 } from "@expo/vector-icons";
import { WebView } from "react-native-webview";
import Spinner from "react-native-loading-spinner-overlay";
const HOME_URL = "도메인 입력";
const BOARD_URL = "https://daum.net";

const Tab = createBottomTabNavigator();

export default function MyTabs() {
  return (
    <Tab.Navigator
      initialRouteName="Home"
      screenOptions={{
        tabBarStyle: styles.tabBarStyle,
        activeTintColor: "#e91e63",
      }}
    >
      <Tab.Screen
        name="Home"
        component={HomeMenu}
        options={{
          headerShown: false,
          tabBarIcon: ({ color, size }) => (
            <Feather name={"home"} color={color} size={size} />
          ),
        }}
      />
      <Tab.Screen
        name="Board"
        component={Board}
        options={{
          headerShown: false,
          tabBarIcon: ({ color, size }) => (
            <FontAwesome5 name={"clipboard"} color={color} size={size} />
          ),
        }}
      />
      <Tab.Screen
        name="Chatting"
        component={Chatting}
        options={{
          headerShown: false,
          tabBarIcon: ({ color, size }) => (
            <FontAwesome5 name={"rocketchat"} color={color} size={size} />
          ),
        }}
      />
      <Tab.Screen
        name="Setting"
        component={Setting}
        options={{
          headerShown: false,
          tabBarIcon: ({ color, size }) => (
            <Feather name={"settings"} color={color} size={size} />
          ),
        }}
      />
    </Tab.Navigator>
  );
}

function HomeMenu({ navigation }) {
  const webViewRef = useRef(null);
  const [loading, setLoading] = useState(true);

  useFocusEffect(
    React.useCallback(() => {
      webViewRef.current.injectJavaScript(`location.href=${HOME_URL}`);
      setLoading(false);
    }, [])
  );

  function LoadAnimation() {
    return <Spinner visible={loading} />;
  }

  return (
    <SafeAreaView style={styles.container}>
      <WebView
        ref={webViewRef}
        onLoad={() => setLoading(false)}
        source={{ uri: HOME_URL }}
      />
      {loading && <LoadAnimation />}
    </SafeAreaView>
  );
}

function Board({ navigation }) {
  const webViewRef = useRef(null);
  const [loading, setLoading] = useState(true);

  function LoadAnimation() {
    return <Spinner visible={loading} />;
  }

  return (
    <SafeAreaView style={styles.container}>
      <WebView
        ref={webViewRef}
        onLoad={() => setLoading(false)}
        source={{ uri: BOARD_URL }}
      />
      {loading && <LoadAnimation />}
    </SafeAreaView>
  );
}

function Chatting({ navigation }) {
  const webViewRef = useRef(null);
  const [loading, setLoading] = useState(true);

  function LoadAnimation() {
    return <Spinner visible={loading} />;
  }

  return (
    <SafeAreaView style={styles.container}>
      <Text>안녕하세요. 여기는 Chatting 입니다.</Text>
    </SafeAreaView>
  );
}

function Setting({ navigation }) {
  const webViewRef = useRef(null);
  const [loading, setLoading] = useState(true);

  function LoadAnimation() {
    return <Spinner visible={loading} />;
  }

  return (
    <SafeAreaView style={styles.container}>
      <Text>안녕하세요. 여기는 Setting 입니다.</Text>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    marginTop: StatusBar.currentHeight || 0,
  },
  tabBarStyle: {
    ...Platform.select({
      ios: {
        height: 60,
        paddingTop: 8,
        paddingBottom: 8,
        marginBottom: 10,
      },
      android: {
        height: 60,
        paddingTop: 8,
        paddingBottom: 8,
        // marginBottom: 10, // 안드로이드에서는 marginBottom을 제외
      },
    }),
  },
});

 

app.json에 

"android": {
      "permissions": [
        "INTERNET",
        "ACCESS_NETWORK_STATE"
      ],

HOME_URL에는 웹 도메인을 입력해준다.

과

"package": "패키지명",
      "versionCode": 1
    },

를 추가해준다. (versionCode는 버전 정보를 의미함)

 

또한 app.json의 "name"과 "slug"는 구글 스토어에 표기되어야 할 이름이고 "icon"은 해당 어플의 아이콘, "image"는 인트로 화면이므로 적절하게 변경해주어야 한다. (따로 설정하지 않아도 기본값이 있어서 구동하는데 문제는 없음)

 

이후 휴대폰에서 Expo로 휴대폰 화면에서 해당 웹을 구동하는 방법은 리액트 네이티브 Expo를 이용한 생성, 관리 (3)에서 설명하도록 하겠다.