모바일 반응형 웹을 프로젝트를 끝내면서 이제 앱을 만들기로 했다 .
시간이 적은 관계로 간소화 시켜서 하이브리드 웹앱을 만들기로 하다보니 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 파일이 생성 됩니다. !