npx creat-react-native-app
expo app에서 native를 접근 할 수 있음
npm run start 로 서버를 실행하고
a => android
i => ios
을 눌러 실행.
어플리케이션을 렌더링하기 여러 자원(font, image 등...)이 필요한데, 자원을 불러오기 전까지 loading 화면을 보여줘야 한다.
import React, { useCallback, useEffect, useState } from 'react';
import { Text, View } from 'react-native';
import Entypo from '@expo/vector-icons/Entypo';
import * as SplashScreen from 'expo-splash-screen';
import * as Font from 'expo-font';
import { useAssets } from 'expo-asset';
// 리소스를 가져오는 동안 스플래시 화면을 계속 표시
SplashScreen.preventAutoHideAsync();
export default function App() {
const [assets] = useAssets([require("file path")]); // image
const [loaded] = Font.useFonts(Entypo.font) // font
if(assets && loaded){
console.log("준비완료");
SplashScreen.hideAsync(); // 로딩화면 숨김
}else{
console.log("준비중");
}
return (
<View
style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}
>
<Text>SplashScreen Demo! 👋</Text>
<Entypo name="rocket" size={30} />
</View>
);
}
import React, { useCallback, useEffect, useState } from 'react';
import { Text, View } from 'react-native';
import Entypo from '@expo/vector-icons/Entypo';
import * as SplashScreen from 'expo-splash-screen';
import * as Font from 'expo-font';
import { Asset } from 'expo-asset';
// 리소스를 가져오는 동안 스플래시 화면을 계속 표시.
SplashScreen.preventAutoHideAsync();
export default function App() {
const [appIsReady, setAppIsReady] = useState(false);
const loadFonts = fonts => fonts.map(font => Font.loadAsync(font));
const loadImages = images => images.map(image =>{
if(typeof image === "string"){
return Image.prefetch(iamge);
}else{
return Asset.loadAsync(image);
}
})
useEffect(() => {
async function prepare() {
try {
//font, image, api 호출...등 loaing 과정에 필요한 동작 작성
const fonts = loadFonts([Entypo.font])
const images = loadImages([require("file path")])
await Promise.all([...fonts,...images])
} catch (e) {
console.warn(e);
} finally {
// 완료되면 화면 렌더링.
setAppIsReady(true);
}
}
prepare();
}, []);
const onLayoutRootView = useCallback(async () => {
if (appIsReady) {
// 스플래시 화면을 숨김
await SplashScreen.hideAsync();
}
}, [appIsReady]);
if (!appIsReady) {
return null;
}
return (
<View
style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}
onLayout={onLayoutRootView}
>
<Text>SplashScreen Demo! 👋</Text>
<Entypo name="rocket" size={30} />
</View>
);
}