리액트네이티브(17)
-
탭탭카드놀이) 코드정리 App.js
앞단 작업이 거의 끝나서 부분 부분 정리할 겸 포스팅합니다. 전체코드는 제 깃헙을 참고하시길 바랍니다. https://github.com/coqoa/tabtabcard //App.js import { NavigationContainer } from '@react-navigation/native'; import * as Font from "expo-font" import AppLoading from 'expo-app-loading'; import React, { useState, useEffect } from 'react'; import Stack from './app/navigators/Stack'; import { SafeAreaView } from 'react-native-safe-area-conte..
2022.04.01 -
탭탭카드놀이) 폰트적용하기 - Font.loadAsync
초록어린이체가 앱에 잘 어울려서 적용했다 1. 폰트파일을 다운받는다 - SDChildfundkorea.otf - SDChildfundkoreaTTF.ttf 2. app/asset/fonts의 경로에 폰트파일을 넣는다 3. root위치에 react-native-config.js파일을 만든 뒤 다음코드를 작성한다 // react-native.config.js module.exports = { assets: ['./app/asset/fonts'] }; 4. 터미널에서 react-native link를 실행한다 (npx react-native link) 위 명령어를 실행하면 ios/프로젝트/info.plist에 폰트파일이 추가되는걸 볼 수 있다 5. 가장 최상단 파일인 App.js에 Font.loadAsync로..
2022.03.27 -
탭탭카드놀이) screen component에서 navigation과 props 같이 주고받기
기능 개발 이유? 메뉴 스크린에서 '단어 놀이'를 탭 하면 언어 선택 모달 창이 뜨고 각 버튼별로 다른 화면을 보여주려고 함 개발 - props를 전달하는 Menu.js //Menu.js const Menu = ({navigation}) => { const [wordSelectModal, setWordSelectModal] = useState(false) //wordSelectModal는 모달토글버튼이다(boolean값을 통해 켜고 끄도록 구현) const BtnClick = (e) => { setWordSelectModal(false) navigation.navigate('WordPlay',{type:e}) // 받은 props를 WordPlay스크린에 같이 전달해줌 } return( //... oth..
2022.03.23 -
탭탭카드놀이) 로직구상
로직을 눈으로 보기 쉽게 그렸음 굵은글씨는 App.js와 네비게이터들, 회색글씨는 스크린, 보라색글씨는 컴포넌트 현재까지 총 Navigator는 2개 Screen은 2개 구현했고 Screen은 총 5개 개발 예정(Login, Signup, Menu, WordPlay, MathPlay) 1. App.js CRNA를 설치하며 생성된 파일 NavigatorContainer의 역할을 하고 index.js에서 App.js를 import 한다 expo의 라이브러리인 AppLoading을 통해 스플래쉬 스크린을 구현할 예정 2. Stack.js (StackNavigator) Login.js, Signup.js, MenuStack.js의 내비게이터 접속 시 Login.js를 보여주도록 구현 3. Login.js (Sc..
2022.03.04 -
탭탭카드놀이) React Native 프로젝트생성 (CRNA)
create-react-native-app을 이용해서 모바일 앱을 만드는데 모바일 앱은 처음이라 프로젝트를 다시 시작하는 경우가 많아 다시보기편하게 작성하는 글 입니다 1. terminal을 열어서 원하는 디렉토리로 이동한뒤 npx create-react-native-app -> → 앱이름작성하고 default설치 클릭 2. 설치완료후 npm start -> metro서버 켜기, 새터미널을 하나 열어서 npm run ios 깃헙 repository 등록하기 - https://github.com/new - 깃헙 repository 생성, 주소복사 - git remote add origin 복사한주소 - git add . - git commit -m "커밋내용” - git push origin master ..
2022.03.04