React-native

realtime database 활용하기

1. realtime database json데이터 내 키값 나눠서 할당하기 : 여러개의 스크린에서 서로 다른 리스트를 넣고 싶을 때, Json데이터와 스크린에서 불러올 키값을 간단하게 수정해 주면 된다. ㄱ. 사용방법 1) realtime database에 업로드 할 json 데이터의 최상위 키 값을 여러개로 하고, 서로 다른 이름으로 지정해준다. 2) 원하는 페이지의 js파일에서, items라는 키값을 원하는 리스트의 키값으로 변경해준다. ㄴ. 예시 1) 여러개의 키값을 지정하여 각각의 리스트를 편집해주고 realtime database에 업로드 DB.json { "items": [ ... ], "items2": [ ... ] } 2) 원하는 페이지.js의 items로 되어있는 부분만 items2로 ..

Loading화면 구현 (2)

1. 구현 화면 방식 ㄱ. 이미지 띄우기 ㄴ. ActivityIndicator 띄우기 2. 설치파일 ㄱ. 이미지 방식 1) 원하는 이미지파일을 프로젝트 내 assets 폴더에 넣어둔다. 2) ㄴ. ActivityIndicator 방식 1) react-native로부터 ActivityIndicator를 import해준다. 2. 이미지 로딩 사용방법 ㄱ. Loading.js 컴포넌트 만들기 import React from 'react'; import { ImageBackground, View } from "react-native"; import 치환값 from '../assets/원하는 이미지 파일명.png'; export default function App() { return ( ); } ㄴ. 사용할 페..

Flatlist + SearchBar (3편 공식문서 SearchBar형)

이번 SearchBar 구현은 총 3가지 형식으로 구성했다. 1) 태그형 ( 링크 : https://radpro.tistory.com/58 ) 2) FlatList에 붙는 Header형 ( 링크 : https://radpro.tistory.com/59 ) 3) 공식문서의 Search바 응용형 ( 링크 : https://radpro.tistory.com/60 ) 본인 취향에 맞게 사용하면 되나, 개인적으로 형이 연동과 렌더링에 가장 용이하다고 판단한다. ------------------------------------------------------------------------------------------------ 공식문서 : https://callstack.github.io/react-nativ..

Flatlist + SearchBar (2편 <FlatList> Header형)

이번 SearchBar 구현은 총 3가지 형식으로 구성했다. 1) 태그형 ( 링크 : https://radpro.tistory.com/58 ) 2) FlatList에 붙는 Header형 ( 링크 : https://radpro.tistory.com/59 ) 3) 공식문서의 Search바 응용형 ( 링크 : https://radpro.tistory.com/60 ) 본인 취향에 맞게 사용하면 되나, 개인적으로 형이 연동과 렌더링에 가장 용이하다고 판단한다. ------------------------------------------------------------------------------------------------ 1. 설치파일 ㄱ. Flatlist를 하나 만들어준다. ㄴ. lodash.filte..

Flatlist + SearchBar (1편 <TextInput> 태그형)

이번 SearchBar 구현은 총 3가지 형식으로 구성했다. 1) 태그형 ( 링크 : https://radpro.tistory.com/58 ) 2) FlatList에 붙는 Header형 ( 링크 : https://radpro.tistory.com/59 ) 3) 공식문서의 Search바 응용형 ( 링크 : https://radpro.tistory.com/60 ) 본인 취향에 맞게 사용하면 되나, 개인적으로 형이 연동과 렌더링에 가장 용이하다고 판단한다. ------------------------------------------------------------------------------------------------ 1. 설치파일 ㄱ. Flatlist를 하나 만들어준다. 2. 사용방법 ㄱ. impo..