전체 글(95)
-
탭탭카드놀이) 코드정리 Stack.js
앞단 작업이 거의 끝나서 부분 부분 정리할 겸 포스팅합니다. 전체 코드는 제 깃헙을 참고하시길 바랍니다. https://github.com/coqoa/tabtabcard //Stack.js import React from "react"; import {createNativeStackNavigator} from "@react-navigation/native-stack" import Login from "../screens/Login"; import Signup from "../screens/Signup"; import MenuStack from "./MenuStack"; const NativeStack = createNativeStackNavigator(); // 스택네비게이터 (Login, Signup,..
2022.04.01 -
탭탭카드놀이) 코드정리 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 -
탭탭카드놀이) useEffect, setTimeout, clearTimeout사용하기
기능 개발을 하는데 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..
2022.03.29 -
탭탭카드놀이) 폰트적용하기 - 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 -
탭탭카드놀이) 자식컴포넌트에서 부모컴포넌트의 state 변경하기
자식 컴포넌트에서 부모 컴포넌트의 state를 수정하는 기능을 구현하는데 필요 없는 코드들이 많아서 모두 작성하진 않았습니다. 빠진 코드들도 굉장히 많고 제대로 작동하려면 필요한 코드들이 많기 때문에 전체 코드를 보고 참고하시는 걸 추천드리며 깃헙에서 보실 수 있습니다 https://github.com/coqoa/tabtabcard 코드 상태? // WordPlay.js import { WordCardLevel } from "../component/CardDefault"; const WordPlay = ({navigation}) => { const [cardSelector, setCardSelector] = useState("word1LV"); // cardSelector에 word1LV라는 문자열을 담..
2022.03.21