React native 개인 공부 기록용

Joon·2023년 5월 3일
0

😀 project 생성

npx creat-react-native-app

expo app에서 native를 접근 할 수 있음

app 실행

npm run start 로 서버를 실행하고
a => android
i => ios
을 눌러 실행.

😀 loading 렌더링

어플리케이션을 렌더링하기 여러 자원(font, image 등...)이 필요한데, 자원을 불러오기 전까지 loading 화면을 보여줘야 한다.

1. 단순히 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>
  );
}

2. 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 { 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>
    );
  }
  

😀 navigation

docs 참고

TypeScipt 적용

docs 참고

  • styeld components error 해결
    npm install --save-dev @types/styled-components @types/styled-components-react-native
    설치 후 ./node_modules/@tsconfig/react-native/tsconfig.json 파일에서 types에 "styled-components-react-native" 추가

0개의 댓글