내일배움캠프 10주차 TIL 10주차를 마치며...

육아에 점점지쳐가고 수업의 진도도 조금씩 밀리기시작한다

하지만 포기하지않고 앞으로 나가보려고한다

저번주금요일부터 시작된 프로젝트는 리엑트네이티브를 활용해서 

팀원들과 앱을 만드는 작은프로젝트이다 내가맡은건 앱을처음구동시에

제일먼저 뜨는 Loader 페이지와 메인 지도페이지를 맡았다

아직 어색한 리엑트네이티브를 활용해서 한땀한땀 만들어  일요일 점심쯤

UI 작업이 끝낫다 폰트를 먹이는데 기본적으로 간단하게먹일수있돈폰트가

왜이리안먹히던지..  간단하게 정리만해보겠다

 

 

하단 모듈들을 필수로 설치해야한다

React native 폰트적용

 

Yarn add expo-app-loading 

Yarn add expo-font

Yarn add expo-splash-screen

 

“Rpm” : { [“assets” : [“./assets/fonts/] ] }  << package.json 추가

 

asset 폴더에 fonts 폴더를 만들고 안에 폰트파일을 넣어주면된다

const Loader = () => {
  const [isReady, setIsReady] = useState(false);

  const getFonts = async () => {
    await Font.loadAsync({
      "NanumPenScript-Regular": require("../assets/fonts/NanumPenScript-Regular.ttf"),
    });
  };
  
   return isReady ? (
    <ContainerViw>
      <WrapContainerView>
        <WrapView>
          <IconImage source={icon} />
          <TittleText>오늘</TittleText>
          <ActivityIndicator size="large" color={"#15147a"} />
          <LoadingText>Loading...</LoadingText>
        </WrapView>
      </WrapContainerView>
    </ContainerViw>
  ) : (
    <AppLoading
      startAsync={getFonts}
      onFinish={() => setIsReady(true)}
      onError={() => {}}
    />
  );
};
export default Loader;

 

isReady 를 사용하여 true값이면 containerview에담긴화면을 랜더링하고

그렇지않다면 로딩화면을 출력한다 끝나는건 isReady의값이 ture가 될때까지라고보면된다

폰트적용하는법이 한가지로정해진것이아니라서 자료를찾고 적용하는데에는어려움이있었지만

그래도 이번주에는 구글링을하는 힘을 조금더기른거같아서 의미가있었던거같다

 

마지막으로 ActivityIndicator 에서의 사이즈는 small medium large 3가지만 사용이가능하다는걸

알고있으면 좋을거같다 색상은 지정할수있다