EXPO로 앱 만들기 [REACT-NATIVE]

모바일 반응형 웹을 프로젝트를 끝내면서 이제 앱을 만들기로 했다 .

시간이 적은 관계로 간소화 시켜서 하이브리드 웹앱을 만들기로 하다보니 EXPO라는것을 사용하게 되었습니다 .

Expo란?

리액트 네이티브 애플리케이션을 더 쉽게 개발하고 빌드하고 배포할 수 있도록 도와주는 도구입니다. Expo는 리액트 네이티브의 기능을확장하고 여러 기능과 서비스를 제공하여 개발자가 앱 개발에 필요한 다양한 작업을 간소화하는것 .

 

개발 환경 구축

일단 깃 베쉬로 EXPO 를 설치해볼꺼입니다.

 

배쉬환경 > 

• npm install -g expo-cli
• expo --version
• expo init 앱이름> 오류가 난다면  npx create-expo-app --template 해보는것도 좋습니다. (NPX는 테스트 작업할떄 많이쓴다고 합니다.) 
• cd 앱이름
• expo start

후 일단 패키지를 추가해볼것 입니다 .

패키지는 VSCODE의 파워셀에서 추가해주었습니다 .

 

파워셀환경 > 

• yarn add @react-navigation/bottom-tabs
• yarn add @react-navigation/native
• yarn add react-native-safe-area-context
• yarn add react-native-webview
• yarn add react-native-loading-spinner-overlay

이로서 간단한 EXPO 앱만들기의 환경작업은 다끝났습니다! 

 

이제생성된 

App.js 파일의 return문 변경 해주고 우리는 MyTabs 를 사용해볼꺼입니다 .

    <NavigationContainer>

      <MyTabs />

    </NavigationContainer>

 

리엑트네이티브의 웹뷰라는것을 사용할것인데 

앱에서 웹을 열어주는 개념이다 .

우린 그걸 Tab 네비게이터로 웹뷰마다 이동시켜줄예정입니다 .

const Tab = createBottomTabNavigator();

하단 네비바 생성

    <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.Navigator>

 

Tab.Screen로 메뉴 생성하여 쓰시면됩니다 .

 

이제 스크린별 웹뷰를 만들어볼까요?  

 

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 컴포넌트를 렌더링

      <WebView

        ref={webViewRef} /

        onLoad={() => setLoading(false)}

        source={{ uri: HOME_URL }} // 내가쓸 도메인

      />

      {loading && <LoadAnimation />} {/*로딩용*/}

    </SafeAreaView>

  );

}

 

이런식으로 웹뷰의 컴포넌트를 작성하면된다 .

const styles = StyleSheet.create({

  container: {

  },

  tabBarStyle: {

    ...Platform.select({ // ios와 android 별 

      ios: {

      },

      android: {

      },

    }),

  },

});

 

탭뷰와 콘테인의 스타일은 여기서 정의해주고 이제 expo start로 연결 및 테스트를 진행해보면됩니다 .!!! 

 

 

핸드폰으로 expo-go 다운로드 후 qr과 연결하시면 

 

 

이런방식으로 업데이트 시키시면됩니다 .

 

이후 스토어에 업로드 하려면  expo에서 설치파일로 만들수있는데

 

vs코드의 파워셀에

 

• npm install -g eas-cli
• eas init
• eas build --platform android (엄청 오래 걸립니다.)

진행하시면 .aab 파일이 생성 됩니다. !