React-native

WebView에서 Back버튼 사용하기(Android버전)

1. 설명 : 안드로이드의 뒤로가기버튼(Back)으로 WebView상의 뒤로가기(스택네비같은 동작)를 사용하기 위해선, 하드웨어적인 기능과 소프트웨어적인 기능을 구현해야 사용이 가능하다. 아래의 코드를 사용한 webview 컴포넌트를 만들어 구현하면 된다. 만약, 공식홈페이지의 Navigation TabBar 컴포넌트를 사용할때, webView를 함께 구성하고 싶다면, TabBar 구현 후, 원하는 컴포넌트 페이지 내에 아래의 WebView를 넣으면 StackNavigation효과를 사용할 수 있다. WebView.js import React, { useRef, useState } from "react"; import { BackHandler } from "react-native"; import { us..

Infinite scroll, Pull down refresh 구현 (Flatlist 사용)

사용기능 : Flatlist, 외부 JSON파일 1. 기본 Flatlist 구현 (테스트용 외부 JSON 파일 사용 => JSONPlaceholder ) : Flatlist에 데이터 목록을 표시하기 위해선 아래의 세가지 props가 기본이다. data={ } : 데이터를 만들 리스트([ ])가 들어갈 곳. 즉, JSON의 키값 혹은 키값을 받은 getter변수를 넣음된다. keyExtractor={ } : FlatList고유 식별자를 사용하거나 id배열의 개별 요소를 사용하도록 지시한다. keyExtractor={item => item.id} 같은 형식으로 사용한다. renderItem={ } : 데이터 배열에서 개별 요소를 가져와 UI에 렌더링하는 곳이다. 즉, UI적 요소를 구성하는 곳이다. rend..

WebView 구성하기

설치파일 npm install --save react-native-webview npm install --save react-native link react-native-webview 기존 core에 있을때는 import {WebView} from 'react-native'; 로 import 해주었지만, 지금은 import { WebView } from 'react-native-webview'; 밑의 코드로 import 해주어야한다. WebView 사용 두 가지 방법 1. uri로 웹페이지를 연결하는 기본식 import React, {Component} from 'react'; import { WebView } from 'react-native-webview'; class MyWeb extends Com..

BotNavi + iframe

설치 패키지 기본세팅 node.js 설치 (LTS버젼으로) npm install -g yarn npm install --global expo-cli expo login --username "Expo 사이트 가입당시 입력한 name" (CMD에서 관리자권한으로) 네비게이션 관련 yarn add @react-navigation/native expo install react-native-gesture-handler react-native-reanimated react-native-screens react-native-safe-area-context @react-native-community/masked-view expo install expo-status-bar expo install react-native-..

React 오류 대처 이모저모

- 아래와 같이 expo start시 문제가 발생하면, 아래의 코드를 터미널에 입력해보자. expo doctor --fix-dependencies - node-module의 문제가 발생하면, 싹 다 지우고 node.js를 새로 설치해보자. - npm install --global expo-cli 등 설치 중 npm 오류가 나면, 1) 작업관리자 > 세부정보에서 adb.exe 실행취소 2) C:\Users\nyong\AppData\Roaming 폴더로 들어가서 npm폴더 완전삭제 3) VS code의 마켓에 들어가서 npm 삭제 후 재설치