차근차근 생활 & 코딩

안녕하세요. 이번 시간에는 앱 아이콘의 이름을 변경하는 것에 대해 알아보도록 하겠습니다. 어렵지 않으며 간단합니다. 파일 수정하기 \android\app\src\main\res\values\strings.xml 경로에 있는 appicons 부분을 수정해 주시면 됩니다. appicons 수고하셨습니다.

안드로이드 편 Part 1. 웹뷰에서 React Native로 메세지 데이터 보내기 Step 1. 설치하기 웹뷰를 사용 할 수 있도록 아래 명령어를 통해 라이브러리를 설치해 주시면 됩니다. npm i react-native-webview Setp 2. 웹뷰에서 rn으로 데이터 송신(전체 코드) import {View, Alert} from 'react-native'; import React, {useRef} from 'react'; import {WebView} from 'react-native-webview'; export default function App() { const html = ` Send `; const webviewRef = useRef(); /** 웹뷰 ref */ const hand..

안녕하세요. 이번 시간에는 파이어베이스 구글 로그인에 대해 알아보도록 하겠습니다. 내용이 다소 복잡 할 수 있으니 천천히 따라 해보시면 좋을 듯합니다. Step1. Firebase 세팅 ① 프로젝트 추가하기 ② 프로젝트 이름을 정합니다. ③ 프로젝트 이름을 정하셨으면 계속 버튼을 클릭합니다. ④ 애널리틱스 사용 설정을 Off 해주도록 합니다. (통계 분석을 하시고 싶은 분들께서는 On으로 설정하셔도 됩니다.) ⑤ 프로젝트 만들기 버튼을 클릭하여 프로젝트를 만들도록 하겠습니다. ⑥ 새 프로젝트가 준비되었습니다. 이제 신규 프로젝트가 생성된 것을 확인 할 수 있습니다. ⑦ 이제 안드로이드 아이콘 버튼을 클릭하여 앱을 추가하여 시작하도록 하겠습니다. ⑧ Android 패키지 이름을 등록해 주도록 합니다. (자..

안녕하세요. 이번 시간에는 체크박스 버튼을 구현해 보도록 하겠습니다. 설치하기 npm i react-native-bouncy-checkbox --save import import BouncyCheckbox from "react-native-bouncy-checkbox"; 사용하기 {}} /> 전체코드 import { StyleSheet, Text, View } from 'react-native' import React from 'react' import BouncyCheckbox from "react-native-bouncy-checkbox"; export default function App() { return ( {}} /> ) } const styles = StyleSheet.create({ con..

안녕하세요. 이번 시간에는 토글 스위치를 만들어 보도록 하겠습니다. Switch 모듈을 import 해주도록 합니다. import {View, Switch, StyleSheet} from 'react-native'; useState 를 통해 컴포넌트값을 변경하도록 합니다. import React, {useState} from 'react'; const [isEnabled, setIsEnabled] = useState(false); 스위치가 동작 할수 있도록 함수를 만들어 보도록 하겠습니다. const toggleSwitch = () => setIsEnabled(previousState => !previousState); 토글 스위치 코드를 붙여 넣어주도록 합니다. 위에 코드를 보면 어려우시니 이해가 쉽도..

안녕하세요. 이번시간에는 검색 할 때 글자가 자동 완성 되는 기능에 대해서 알아보도록 하겠습니다. 어렵지 않게 간단하게 정리해 보았습니다. 설치 npm install --save react-native-autocomplete-dropdown or (또는) yarn add react-native-autocomplete-dropdown 아이콘 설치 yarn add react-native-vector-icons 패키지 가져오기 import { AutocompleteDropdown } from 'react-native-autocomplete-dropdown' 예제 데이터 const [selectedItem, setSelectedItem] = useState(null) 전체 테스트 코드 import {StyleS..

안녕하세요. 이번시간에는 React Native 안드로이드 버전 카카오 로그인을 구현해 보도록 하겠습니다. 카카오 로그인 구현이 초보자들은 쉽지는 않으니 천천히 따라 해 보시길 바랍니다. Android(안드로이드) Step 1. 설치하기 yarn add @react-native-seoul/kakao-login * 설치 후 바로 ReactNative를 실행하시면 오류가 발생할 수 있으니 설치 후 아래 순서대로 전부 작업 후 ReactNative를 실행하시길 권장합니다. Step 2. 키해시 등록 아래 명령어를 입력을 통해 키해시 등록을 진행 하도록 합니다. keytool -exportcert -alias androiddebugkey -keystore ./android/app/debug.keystore -s..

안녕하세요. 이번 시간에는 리액트 네이티브 파이어베이스 애드몹 광고 게시하는 방법에 대해 알아보도록 하겠습니다. Installation(설치) app, admob 2개의 앱 모듈을 설치하도록 하겠습니다. # Install & setup the app module npm install --save @react-native-firebase/app@11.5.0 # Install the admob module npm install --save @react-native-firebase/admob * 주의사항 : 애드몹을 사용하기 위해서는 Firebase 11.5.0 버전으로 사용하셔야 합니다. Firebase 최신 버전으로 admob을 사용 시 지원하지 않는다고 합니다. 꼭 버전을 맞추어 작업하시길 바랍니다. 구..