[React Native Expo] 프로젝트 설치부터 Route(네비) 설치까지

expo 패키지 설치

npx create-expo-app '프로젝트네임'

 

route 설치 (sdk 49미만 기준) package파일에 main에 루트 변경해주고 babel에 plugin 추가해준다

npx expo install expo-router react-native-safe-area-context react-native-screens expo-linking expo-constants expo-status-bar react-native-gesture-handler

// package.json
{
  "main": "expo-router/entry"
}
// babel.config.js
module.exports = function (api) {
  api.cache(true);
  return {
    presets: ['babel-preset-expo'],
    plugins: ['expo-router/babel'],
  };
};

 

그러고 root 폴더에 app폴더를 만들어준다.

 

아래 _layout.tsx를 만들어서 레이아웃을 잡아주는데 LayoutInner를 한번 더 잡아주는 이유는 나중에 쓸 store(redux)때문에..

store가 한번더 감싸지 않으면 store 적용된 바깥에 제대로 적용이안된다. 만약 redux기능을 안쓸거라면 그냥 _layout.tsx쪽에

import { View, Text } from "react-native";
import { Slot } from "expo-router";

const LayoutInner = () => {
  return (
    <View>
      <Slot />
    </View>
  );
};

export default LayoutInner;

slot으로 page를 만들어주고

index.tsx에 대충

import { View, Text } from "react-native";

const Home = () => {
  return (
    <View>
      <Text>Home</Text>
    </View>
  );
};

export default Home;

페이지 하나 띄워주면

 

홈으로 이동~

그러고 컴포넌트폴더에 header 만들어보자

<Link href="/list">
    <Text>
        리스트
    </Text>
</Link>

이렇게 링크를 이동할 수 있는데 버튼형 링크를 만들고자한다면

<Link href="/list" asChild>
    <Pressable>
      <Text>list</Text>
    </Pressable>
</Link>

이렇게 Link에 asChild를 넣어줘야 pressable 버튼이 작동된다.

script에서 링크이동을 하고싶다면

import { router } from "expo-router";

router.push("/list");

or

router.replace("/list");

push나 replace로 할 수 있는데 push는 페이지이동개념, replace는 페이지변경개념이다.