본문 바로가기

React

(29)
3. React Navigation - stack navigation을 통한 화면전환방법 https://reactnavigation.org/docs/getting-started 프로젝트 생성 후 1. react-navigation 설치 npm install @react-navigation/native 2. dependency 설치 npm install react-native-screens react-native-safe-area-context From React Native 0.60 and higher, linking is automatic. So you don't need to run react-native link. react native 0.60 버전 이하만 react-native link 시켜줘야하고, 그 이상은 자동으로 연결됨 3. Stack Navigation 설치 npm inst..
2. React native CLI - Android Emulator 실행 or 스마트폰 기기 실행 1. Android Emulator로 실행 1) npm 실행 vscode에서 진행 npm start 2) AVD MANAGER 실행 안드로이드 스튜디오에서 진행 (type은 자유롭게 사용가능) 3) run Android vscode에서 추가 터미널 열어서 실행 $ react-native run-android 4) Emulator 단축키 r을 빠르게 두 번 누르면 에뮬레이터 새로고침 Ctrl+m을 누르면 메뉴창. 여기서 디버그 선택 가능 -Disable Fast Refresh: 코드 수정되어도 에뮬레이터에 반영 안 되며, rr로 수동 으로 리프레시 해줘야 함 -Enable Fast Refresh: 코드 수정되면 에뮬레이터 자동 리프레시 2. 스마트폰 기기로 실행 1) 핸드폰 설정 설정 - 개발자 옵션 - ..
1. React native CLI 설치 및 셋팅하기 초기환경 구축 nvm(Node Version Manager) - 여러node.js 사용위해 버전별로 격리시키는 역할 node.js npm(Node Package Manager) Android Studio JAVA XCode Visual Studio Code CocoaPod React Native CLI 1. node.js 설치 node -v #v14.17.1 2. npm 설치 - node.js 설치하면 자동으로 설치됨 npm --version #6.14.13 3. Android Studio 설치 File - setting - Android SDK Tools - AVD Manager 4. Android Studio SDK 환경변수 설정 검색 '고급 시스템 설정' 검색 - 환경변수 - (시스템변수) 새로만들..
React native / 좋아요 기능 구현 1. 간단한 DB 테이블 구조 작성 : 회원은 여러 게시물에 '좋아요'를 누를 수 있다. 2. vector-icons에서 아이콘결정 vector-icons 종류 확인 사이트 https://oblador.github.io/react-native-vector-icons/ 3. 화면 만들기 favorite.js import { AntDesign } from '@expo/vector-icons'; import { View, Text, Pressable, ToastAndroid } from 'react-native'; const [favorite, setFavorite] = useState(); //Toast Android const showToastMessage = (msg) => { ToastAndroid.s..
React Native / TextInput 박스 안에 button 넣기 이런 모양처럼 TextInput 박스 안에 button을 넣고 싶었다. 구선생님이 알려주신 방법으로 문제 해결 수정 전 코드 중복확인 수정 후 코드 중복확인 const styles = StyleSheet.create({ button:{ width:'90%' }, phoneBox:{ flexDirection:'row', marginTop:15, paddingHorizontal: 5, paddingVertical: 6, borderBottomWidth:1, borderBottomColor:'#ddd', width: '100%', }, authFont:{ color:"#808080", paddingHorizontal: 6, fontWeight:'bold', fontSize: 16, fontFamily: 'na..
React Native / 메모장 만들기 sample (useEffect, AsyncStorage ) 간단하게 메모를 한 후에 저장 후, 해당 저장한 내용을 불러오는 메모장 만들기를 연습삼아 해보았다. (참고사이트) https://www.youtube.com/watch?v=1mkgX7Mr5fI App.js import { StatusBar } from 'expo-status-bar'; import React, {useEffect, useLayoutEffect, useState}from 'react'; import { StyleSheet, Text, View,SafeAreaView, Button, TextInput } from 'react-native'; import AsyncStorage from '@react-native-async-storage/async-storage'; export default ..
React Native / SafeAreaView (iOS, Android 헤더 제외) React Native 사용시 핸드폰으로 확인 하는 경우 헤더(Header)부분이 배터리, 시계 영역으로 잡혀있어서 보이지 않는 경우가 있음 이에 marginTop 을 주는것이 아니라 React Native 내에 내장된 컴포넌트를 이용하여 사용 가능 SafeAreaView 1. import 부분에 SafeAreaView 추가 import { StyleSheet, Text, SafeAreaView } from 'react-native'; 2. SafeAreaView 적용 export default function App() { return ( 헤더내용 ); } SafeAreaView를 최상위 컴포넌트로 warpping하여 사용한다. https://docs.expo.io/versions/latest/reac..
Warning: Failed child context type: Invalid child context `virtualizedCell.cellKey` of type `number` supplied to `CellRenderer`, expected `string`. React Native 하면서 여러 우여곡절과 많은 에러를 만나고 있다. 이번에 만난 에러. Warning: Failed child context type: Invalid child context `virtualizedCell.cellKey` of type `number` supplied to `CellRenderer`, expected `string`. at node_modules\react-native\Libraries\LogBox\LogBox.js:173:8 in registerError at node_modules\react-native\Libraries\LogBox\LogBox.js:59:8 in errorImpl at node_modules\react-native\Libraries\LogBox..