React-native

에러화면, 로딩화면 구현 (1)

( 로딩화면에 이미지 사용시, 추가 링크 : https://radpro.tistory.com/61 ) 1. 목적 : 에러화면, 로딩화면을 useEffect로 구현하던 기존 방식을 따로 정리하려고 한다. 2. 준비사항 : useState와 useEffect를 import해두기 ActivityIndicator도 import해두기 *기호에 따라 로딩화면도 import해두기 3. 적용방법 ㄱ. import해주기 import React, { useState, useEffect } from 'react'; import { ActivityIndicator, ... } from 'react-native'; ㄴ. useState 선언해두기 export default function Users() { const [load..

[실패일지] Search bar 연동 중 쿼리문제

1. 목표 : Flatlist에 Searchbar를 구현했다. 여기에 내가 지정한 database에서 쿼리가 정상 작동해야 한다. 또한, 현재 searchBar에 입력하면, 문자 하나 받을 때마다 키보드가 자꾸 내려간다. 이 또한 같이 고친다. 2. 현재 코드 : 컴포넌트화 안해놨더니 짱짱 길다. import React, { useState, useEffect, useCallback } from 'react'; import { ActivityIndicator, FlatList, View, Text, Image, StyleSheet, TouchableOpacity, Button, Alert, TextInput } from 'react-native'; import { firebase_db } from '....

fetch이해하기 (네트워킹)

공식문서 : https://reactnative.dev/docs/network Networking · React Native Many mobile apps need to load resources from a remote URL. You may want to make a POST request to a REST API, or you may need to fetch a chunk of static content from another server. reactnative.dev 1. 설명 : ㄱ. fetch는 react-native에서 제공하는 기본 네트워킹 API다. ㄴ. JSON으로 구성된 URL에서 데이터를 가져올 수 있다. ㄷ. 네트워킹은 본질적으로 비동기(Async)다. ( 비동기 참고자료 : ht..

FlatList + Iframe 연동

1. 설치파일 ㄱ. iframe을 설치해준다. ( 참고링크 : https://radpro.tistory.com/22 ) ㄴ. FlatList를 만들어준다. ( 참고링크 : https://radpro.tistory.com/51 Firebase와 함께 연동한 것) 2. 목적 : 유튜브 영상을 꽁으로 보려는 수작이다. 유튜브 영상은 프리미엄을 쓰지 않는 이상, 유튜브 앱또는 웹을 통해 봐야하는데, 영상이 이러한 플랫폼을 거치면서 광고가 삽입된다. 그러나 이 방식을 사용하면, 유튜브 플레이어(=iframe)를 사용하여, 유튜브 API를 통해 videoId에 직접 접근하는 방식을 사용하기에, 중간 광고가 없다. (단, 직접적인 유튜브 API 쿼리를 아직 연동하지 않은 상태이기에, 개인적으로 데이터베이스를 따로 관..

[실패일지] FlatList에 iframe 적용하기 (성공완료)

1. 목적 : 이번엔 Firebase와 연동해둔 FlatList에서 얻은 동영상 정보를 iframe을 통해 재생할 수 있도록 연동한다. 2. 실험시작 시도 1 : 를 이용해서 onPress props를 통해 실행시킬것이다. 처음엔 간단하게 onPress를 이용해 videoId가 제대로 들어오는지 확인해보자. 다음과 같이 onPress작동시, 실행 될 함수를 선언해주고, TouchableOpacity에 onPress넣고 실행. 결과 : const로 선언한 함수에서 item이란 인자를 못찾는다. ScrollView에서는 map함수로 재깍재깍 찾았으나, 얘는 map함수로 돌아가는 것이 아니라 못찾나 추측중. const onPress = ({ item }) => { return console.log(item.i..