앞단 작업이 거의 끝나서 부분 부분 정리할 겸 포스팅합니다. 전체코드는 제 깃헙을 참고하시길 바랍니다. 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..

기능 개발을 하는데 setTimeout을 쓸 곳이 많았다 - 리렌더링을 위해 기존의 state값을 false로 만들고 50ms후 true로 만든다 - 카드의 이미지를 터치했을 때 보여줄 화면을 일정 시간 유지해야 한다 - 카드의 텍스트를 터치했을 때 보여줄 화면을 일정시간 유지해야 한다 - 카드리스트가 끝나고 다시 볼지 다음 단계로 넘어갈지 선택하면 레벨을 받아서 리렌더해야한다 시뮬레이터에서 실행은 잘 되지만 이러한 에러가 떴다 Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel a..

초록어린이체가 앱에 잘 어울려서 적용했다 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로..

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