[TIL] 이러케 바쁠 줄 몰라쒀 오늘의 개발일지
오늘은 오전 강의를 듣고, 오후엔 강의 복습을 하다 패스트캠퍼스 리액트 강의를 들으려고 했는데
(이때까진 몰라따 이렇게 바빠질 지 ㅋ)
웬걸, 수업을 듣고나니 끝에 과제가 있던거시아닝가
(ui만 작업하는 과제였지만, 리액트 네이티브 앱이 어떻게 돌아가는지도 제대로 알고싶었기 때문에 더 걸린듯 ㅇㅅㅇ)
프로젝트를 새로 만들어서 하나하나 코드를 따라치면서 이해하는데
난 왜 리액트-네이티브가 재미찌 ㅇ_ㅇ ?
먼가 앱만드는거.... 어? 예뿌당
아무튼, 과제하면서 중간에 궁금한 점이 있었는데
import React from "react";
import { createNativeStackNavigator } from "@react-navigation/native-stack";
import Tabs from "./Tabs";
import Stacks from "./Stacks";
const Stack = createNativeStackNavigator();
export default function Root() {
return (
<Stack.Navigator
screenOptions={{
headerBackTitle: "난 root의 뒤로야",
}}
>
<Stack.Screen name="Tabs" component={Tabs} />
<Stack.Screen name="Stacks" component={Stacks} />
</Stack.Navigator>
);
}
이 코드를 보면, 나는 Tabs와 Stacks가 둘 다 호출이 된다고 생각을 했는데, Tabs만 호출이 되는 것을 확인했다
내가 따로 default값을 설정한 적이 없는데, 왜 Tabs만 먼저 뜨는지 궁금해져서 튜터님께 여쭤보니 첫번째 스크린을 토해내는게 기본값이라고 하셨당
Stacks를 위로 올려보니, Stacks가 먼저 실행이 되었당!!!
Stacks도 createNativeStackNavigator로 생성했었는데, 역시나 여기서도 One이 제일 먼저 뜨는 것을 알 수 있었당
export default function Stacks() {
console.log("Stacks도 호출됐다면 쏴리질러~~~~");
return (
<Stack.Navigator
screenOptions={{
headerBackTitle: "난 Stacks의 뒤로~",
// presentation: "modal",
animation: "flip",
}}
>
{/* Stacks도 내가 누를때마다 호출이 된다.*/}
{/* 뭘 누를때마다? One,Two 컴포넌트를 누를때마다 */}
<Stack.Screen name="one" component={One} />
<Stack.Screen name="two" component={Two} />
</Stack.Navigator>
);
}
아래는 오늘 공부하면서 정리한 개발일지 / 과제한거 깃헙
https://warn-code.tistory.com/225
[리액트네이티브] react-navigation
리액트에선 리액트-라우터-돔을 사용했었는데, 리엑트 네이티브에선 리액트-네비게이션을 쓴다고 한당 (아래는 리액트 네이티브 공식문서) https://reactnavigation.org/docs/native-stack-navigator/ https://react
warn-code.tistory.com
https://warn-code.tistory.com/224
[리액트네이티브] 앱 아이콘 만들기
npx create-expo-app 프로젝트명 프로젝트를 생성하면, 기본적으로 assets 폴더에 icon, splash, adaptive-icon이 세팅이 되어있다 splash : 앱이 로딩되는 동안 보여지는 이미지 adaptive-icon : 안드로이드 폰을 위
warn-code.tistory.com
https://github.com/ddoqi/react-native/tree/dev/react-native-0103-assignment
GitHub - ddoqi/react-native
Contribute to ddoqi/react-native development by creating an account on GitHub.
github.com