본문 바로가기

728x90

개발/React Native

(8)
[react-native] Bottom Tab Navigator 페이지 전환 예제 + 상위 컴포넌트 함수전달 Bottom Tab Navigator 사용 예제이다. 또한 하위 컴포넌트에서 이벤트를 발생시켰을 때, 상위 컴포넌트로 함수를 전달하는 방법을 작성한다. 상위 컴포넌트 테스트를 위한 예제 컴포넌트를 아래와 같이 만들었다. 아래에 의 component 속성에 이동하려는 컴포넌트 명을 입력한다. component 속성 내부에 있는 컴포넌트 명이 하위 컴포넌트가 된다. Tab Navigator로 하위 컴포넌트에 함수를 전달할 때, 중요한 것은 "initialParams =" 이다. 해당 명령어를 이용하면 Tab Navigator에서도 함수를 전달할 수 있게 된다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 3..
[react-native] Modal창 예제 https://github.com/maxjvh/react-native-simple-modal#readme GitHub - maxjvh/react-native-simple-modal: A simple JavaScript modal component for React Native. A simple JavaScript modal component for React Native. - GitHub - maxjvh/react-native-simple-modal: A simple JavaScript modal component for React Native. github.com react-native 환경에서 모달 창을 사용할 수 있도록 해주는 라이브러리다 모달이란 ? 모들 윈도(Modal Window)는 사용자 인..
[react-native] 페이지 리프레쉬(리렌더링) 예제 + 함수형 컴포넌트 useEffect + useIsFocused + 페이지 리로드 데이터 reload + 데이터 렌더링 리액트 네이티브에서, 개발하고 있는 스크린의 데이터를 리로드 해야 할 때가 있다. 게시판을 예로 들어, 상세 페이지에서 글에 대한 댓글을 달고 난 뒤, 게시판의 리스트 페이지로 돌아오면, 댓글의 수가 증가되어 있어야하는데, navigation goback 함수나, pop 함수를 이용하여 뒤로가기를 하면, 해당 댓글의 수가 증가되어 있지 않다. 이런 경우에, 페이지를 리프레쉬 시켜줘야하는데, 이 떄 사용할 수 있는 것이 바로 useEffect이다. 1 2 3 4 5 6 7 const [test,setTest] = useState(0); useEffect(() => { return () => { selectList(); // 게시판 데이터 조회 메소드 } }, [test]); cs 다음과 같이 useStat..
[react-native] LottieView 애니메이션 적용하기 리액트 네이티브 개발환경에서 애니메이션을 적용하고 싶을 때, Lottie 라는 라이브러리를 이용하면 쉽게 구현할 수 있다. 용량이 크고 파일이 무거운 gif 파일을 이용하는 대신, LottieView 를 이용해보자. 먼저, 확장자가 json 인 애니메이션 파일을 직접 만들거나 예제 파일을 찾아서 구해 놓은 후, 라이브러리 설치를 진행하자 React-Native Community https://github.com/lottie-react-native/lottie-react-native GitHub - lottie-react-native/lottie-react-native: Lottie wrapper for React Native. Lottie wrapper for React Native. Contribute..
[react-native] react-native 라이브러리를 이용한 카카오톡 공유하기 리액트 네이티브 환경에서 카카오톡 공유하기 기능을 구현하기 위해 인터넷을 뒤적이는 중, 어떤 개발자 분이 만들어 둔 카카오 공유 모듈을 발견했다. 사용법도 쉬워서 바로 적용해보았다. https://github.com/millo-L/react-native-kakao-share-link#readme GitHub - millo-L/react-native-kakao-share-link: 리액트 네이티브 카카오 링크 오픈 소스 리액트 네이티브 카카오 링크 오픈 소스 . Contribute to millo-L/react-native-kakao-share-link development by creating an account on GitHub. github.com 바로 상단의 github 페이지인데, 설명도 아주 잘..
[react-native error] Warning: Functions are not valid as a React child. This may happen if you return a Component instead of <Component /> from render. Or maybe you meant to call this function rather than return it. 해결 방법 해당 오류는 react-native 환경에서 개발할 때, 많이 볼 수 있는 오류다. 이 오류는 불친절하기 때문에, 로그를 봐도 어디서 오류가 났는지 보여주지 않고, 해당 오류만 남게 되는데 알고 있으면 쉬운 오류다. 내가 해결했던 처리 절차는 다음과 같다. 1. 자바스크립트 표현식 오탈자 체크 1.1 JSX 내부에서 {} (중괄호)로 된, 자바 스크립트 표현식에 오탈자를 체크한다 {list.arr.map(res => { ...})} 해당 구문에서 중괄호나 소괄호가 빠졌는지 체크해보자. 1 2 3 4 5 6 7 8 9 {list.arr.map(res => { return( 테스트 ) })} Colored by Color Scripter cs 1.2 JSX 내부 즉시 실행 함수의 오탈자를 체크한다. 아래에..
[react-native ios error] Failed to launch the app on simulator, An error was encountered processing the command (domain=com.apple.CoreSimulator.SimError, code=405):Unable to lookup in current state: Shutdown 에러 해결방법 1 2 error Failed to launch the app on simulator, An error was encountered processing the command (domain=com.apple.CoreSimulator.SimError, code=405): Unable to lookup in current state: Shutdown Colored by Color Scripter cs ios 가상기기를 사용하다 보면 해당 오류가 뜰 때가 있음. 해당 에러는 ios 에뮬레이터를 완전히 종료하지 않고, run 했기 때문임 ios에뮬레이터 오른쪽 클릭 후, [종료] 를 클릭해서 완전히 종료한 후, 다시 실행시키면 잘 된다.
[react-native] 퍼센트 진행률 모듈 (react-native-percentage-circle) 프로젝트를 진행하다 보면, 데이터의 진행도를 수치화해서 보여줄 때가 있다. RN 모듈 중, 해당 모듈이 데이터의 진행도를 쉽게 나타낼 수 있어서 찾아왔다. https://github.com/JackPu/react-native-percentage-circle#readme GitHub - JackPu/react-native-percentage-circle: 🐳 React Native Percentage Circle 🐳 React Native Percentage Circle. Contribute to JackPu/react-native-percentage-circle development by creating an account on GitHub. github.com 사용법도 간편하다 . npm i react..

728x90