기능 개발 이유? 메뉴 스크린에서 '단어 놀이'를 탭 하면 언어 선택 모달 창이 뜨고 각 버튼별로 다른 화면을 보여주려고 함 개발 - 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..

자식 컴포넌트에서 부모 컴포넌트의 state를 수정하는 기능을 구현하는데 필요 없는 코드들이 많아서 모두 작성하진 않았습니다. 빠진 코드들도 굉장히 많고 제대로 작동하려면 필요한 코드들이 많기 때문에 전체 코드를 보고 참고하시는 걸 추천드리며 깃헙에서 보실 수 있습니다 https://github.com/coqoa/tabtabcard 코드 상태? // WordPlay.js import { WordCardLevel } from "../component/CardDefault"; const WordPlay = ({navigation}) => { const [cardSelector, setCardSelector] = useState("word1LV"); // cardSelector에 word1LV라는 문자열을 담..

탭탭카드놀이를 만들며 공부한 내용입니다 의견을 주시면 감사하겠습니다 FlatList를 이용해서 스와이프로 카드를 넘기도록 구현하는데 JSON파일을 사용해서 구현하다가 막혔다 하루를 꼬박 써서 JS파일을 사용하는 해결법을 찾아냈고 기록을 위해 작성한다 JSON파일로 해결하지 못한 것부터 JS파일로 해결한 것까지 모두 기록하는 글이다 1. JSON파일 사용 각 카드마다 달라야 하는 값은 이미지와 배경 색깔, 텍스트이다 JSON파일을 준비하고 Word.js에서 FlatList를 통해 사용한다 - 디렉터리 구조 wordCard.json파일과 Word.js파일에서 작업했다 - JSON파일 image에는 이미지 파일의 상대 경로를 string형태로 저장, name에는 출력될 텍스트를 string형태로 저장했다 (이..

개발 현황은 깃헙을 통해 확인 가능합니다 https://github.com/coqoa/tabtabcard GitHub - coqoa/tabtabcard Contribute to coqoa/tabtabcard development by creating an account on GitHub. github.com 공부하면서 문제 해결하거나 기능 구현한 것들 위주로 작성하는 글입니다 현재 작업중인 파일은 Menu.js와 WordPlay.js, CardDefault.js, wordCardArray.js, colors.js이다 Menu.js 단어놀이 / 수학놀이를 선택하기 위한 메뉴 screen이다 import React from "react"; import styled from "styled-components"..

개발 현황은 깃헙을 통해 확인 가능합니다 https://github.com/coqoa/tabtabcard GitHub - coqoa/tabtabcard Contribute to coqoa/tabtabcard development by creating an account on GitHub. github.com 공부하면서 문제 해결하거나 기능 구현한 것들 위주로 작성하는 글입니다 로직 구상을 하고 내비게이터의 역할을 하는 파일들을 먼저 생성한 뒤 스크린들을 생성하도록 한다 App.js //App.js import React, { useState } from 'react'; import AppLoading from 'expo-app-loading'; import Stack from './app/navigato..

로직을 눈으로 보기 쉽게 그렸음 굵은글씨는 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..