YELOPER

[기능 구현] 글 작성 글 목록 조회 달력 보기 검색 기능 수정 하기, 삭제하기 0. 화면 설계 1. react-navigation 적용하기 RootStack: 네이티브 스택 내비게이션 사용 MainTab: 하단 탭 내비게이션 사용 FeedsScreen: 작성한 글 목록 형태로 보여주는 화면 CalenderScreen: 작성한 글 달력 형태로 보여주는 화면 SearchScreen: 글 검색할 수 있는 화면 WriteScreen: 글 작성, 수정하는 화면 MainTab 화면 import {createBottomTabNavigator} from '@react-navigation/bottom-tabs'; import React from 'react'; import CalendarScreen from './Ca..

- 리액트 내비게이션 라이브러리에는 다른 상황에 사용할 수 있는 다양한 내비게이터가 있음 - 네이티브 스택 내비게이터가 가장 흔히 사용됨 - 안드로이드: Fragment - iOS: UINavigationController - 라이브러리를 추가로 설치해주어야 함 yarn add @react-navigation/native-stack 1. screens 디렉터리 - 화면 전용 컴포넌트 저장 2. 네이티브 스택 내비게이터 만들기 - createNativeStackNavigator 함수 사용 - 위 함수 사용하면 Stack이라는 객체 만들어짐 - Stack 안에 Stack.Navigator 컴포넌트, Stack.Screen 컴포넌트 들어있음 - Stack.Navigator : NabigationContaine..

1. 리액트 네이티브에서는 별도의 CSS 파일에 스타일 지정 X 자바스크립트 파일 안에서 StyleSheet 사용 2. CSS와의 차이점 - 모든 스타일 속성: camelCase - display 기본 속성: flex / 다른 값은 none뿐! - flexDirection 속성의 기본값: 웹- row, 리액트 네이티브- column - 스타일링 시 숫자 단위는 dp뿐 - background 대신 backgroundColor 사용 - border 대신 borderWidth, borderStyle, borderColor 등을 따로따로 설정 import React from 'react'; import {View, StyleSheet} from 'react-native'; function Box({rounded..

1. Props - Properties의 줄임말. - 컴포넌트의 속성을 의미. - Props를 사용하면 컴포넌트를 사용할 때 임의의 값 넣어줄 수 있음 import React from 'react'; import {SafeAreaView} from 'react-native'; import Greeting from '../components/Greeting'; const App = () => { return ( ); }; export default App; 2. defaultProps - 컴포넌트에 Props를 지정하지 않았을 때 사용할 기본값 설정 import React from 'react'; import {View, Text} from 'react-native'; function Greeting(pr..

주의점! 자바 버전을 11이상으로 할 것 환경 변수 설정에서 루트가 제대로 되어있는지 루트 안에 자바 11버전 이상이 잘 들어있는지 확인