(React-Native) Project: Create Project & StackNavigator 기능 넣기

등산용 모바일 앱을 만들려고 한다.

 

*Note*

(Windows)

- nvm v12 or v16 사용: "nvm ls"

- cmd에서 Expo 도구 명령어를 사용할 수 있는 도구 다발을 전체 다 설치: "npm install -g expo-cli"

 

1) Creating Project

 

Windows Terminal: "expo init 프로그램이름"

enter(expo 프로그램 생성): "blank a minimal app as clean as an empty canvas"

 

*Note*

'prettier' 설치

App.js 파일 위치에 '.prettierrc' 파일 생성

파일 안에 아래 코드 작성하고 저장

{"semi": true,
 "singleQuote": true}

공식문서 참조 가능

 

*Note*

jsx 문법: 화면을 그리는 기술에 대한 문법

 

2) Design Project

 

LoadingPage, MapPage, MyMainPage, DetailPage, MyDetailPage, RecordPage,

SignInPage, SignUpPage

 

아래는 pages에 들어가는 기본 코드

기본코드를 저장해 놓고 필요할 때 붙여다 쓰면 좋다.

import React from 'react';
import { StyleSheet, View, Text } from 'react-native';

export default function DetailPage() {
  return (
    <View>
      <Text>DetailPage</Text>
    </View>
  );
}

const styles = StyleSheet.create({});

StackNavigator.js 파일에 각 page들을 component화 시켜서 import 한다.

아래와 같이 component들을 page화 해준다.

const Stack = createStackNavigator();

로 불러오고,

<Stack.Navigator> 안에 <Stack.screen>으로 component들을 page화 해준다.

import React from 'react';
import { createStackNavigator } from '@react-navigation/stack';
import DetailPage from '../pages/DetailPage';
import MapPage from '../pages/MapPage';
import MyDetailPage from '../pages/MyDetailPage';
import MyMainPage from '../pages/MyMainPage';
import RecordPage from '../pages/RecordPage';
import SignInPage from '../pages/SignInPage';
import SignUpPage from '../pages/SignUpPage';

const Stack = createStackNavigator();

const StackNavigator = () => {
  return (
    <Stack.Navigator
      screenOptions={{
        headerStyle: {
          backgroundColor: 'black',
          borderBottomColor: 'black',
          shadowColor: 'black',
          height: 100,
        },
        headerTintColor: '#FFFFFF',
        headerBackTitleVisible: false,
      }}
    >
      {/* Making components to pages */}
      <Stack.Screen name="DetailPage" component={DetailPage} />
      <Stack.Screen name="MapPage" component={MapPage} />
      <Stack.Screen name="MyDetailPage" component={MyDetailPage} />
      <Stack.Screen name="MyMainPage" component={MyMainPage} />
      <Stack.Screen name="RecordPage" component={RecordPage} />
      <Stack.Screen name="SignInPage" component={SignInPage} />
      <Stack.Screen name="SignUpPage" component={SignUpPage} />
    </Stack.Navigator>
  );
};

export default StackNavigator;

 

*Note*

React Navigation 공식문서 참고

expo는 yarn을 이용해서 도구 설치

 

*Debugging*

expo init으로 프로젝트를 생성한 후,

page 파일들 생성 후,

import StackNavigator from './navigations/StackNavigator';

에서 error 남.

이럴 땐, babel/config.js 파일에 아래와 같이 라인을 넣어주면 해결됨. 

아마도 expo init 할 때 자동으로 생성된 node_modules가 업데이트 되면서 StackNavigator import 시 문제가 생긴것 같음.

module.exports = function (api) {
  api.cache(true);
  return {
    presets: ['babel-preset-expo'],
    //아래 line 추가
    plugins: ['react-native-reanimated/plugin'],
  };
};