등산용 모바일 앱을 만들려고 한다.
*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'],
};
};
'Computer Programming > React-Native' 카테고리의 다른 글
(React-Native) Project: Animatable(애니메이션 효과 넣기) (0) | 2022.08.23 |
---|---|
(React-Native) Project: TabNavigator 기능 넣기 (0) | 2022.08.15 |
React-Native App 개발(Page와 Component 만들기) (0) | 2022.07.18 |
React-Native App 개발(component 이용한 counter 만들기) (0) | 2022.07.05 |
앱개발 종합반_filter (0) | 2022.06.27 |