본문 바로가기

반응형

React

(8)
react-native에서 네이버 클라우드펑션의 php로 업로드할때 let formData = new FormData(); formData.append('name', '이름); formData.append('phone', '123-123-123); formData.append('photo[]', { uri: '이미지주소', name: '파일명', 'image/jpeg' }); try { let response = await fetch("네이버 클라우드펑션/json", { method: 'POST', body: formData, headers: { 'content-type': 'multipart/form-data', }, }); let responseJson = await response.json(); console.log(responseJson); } catch (err..
[react native] firebase database를 이용한 메모장 앱 만들기 import { StatusBar } from 'expo-status-bar'; import React, { useState, useRef, useEffect } from 'react'; import {TextInput, SafeAreaView, FlatList, Button, StyleSheet, Text, View } from 'react-native'; import * as firebase from 'firebase'; var firebaseConfig = { apiKey: "--", authDomain: "--", projectId: "--", storageBucket: "--", messagingSenderId: "--", appId: "--" }; if(firebase.apps.length==..
[react native] 메모장 앱 만들기(리스트 타입) import { StatusBar } from 'expo-status-bar'; import React, { useState } from 'react'; import { SafeAreaView, StyleSheet, Text, TextInput, TouchableOpacity, View, FlatList, Alert } from 'react-native'; export default function App() { const [writeMode, setWriteMode] = useState(false); const [txt, setTxt] = useState(''); const orimemo = [ { id:'1', memo:'안녕하세요.' }, { id:'2', memo:'서기입니다.' }, { id:'..
[react native] 메모(저장 및 불러오기) 앱 import { StatusBar } from 'expo-status-bar'; import React, {useEffect, useState, } from 'react'; import { StyleSheet, Text, View, SafeAreaView, Button, TextInput } from 'react-native'; import AsyncStorage from '@react-native-async-storage/async-storage'; export default function App() { const [txt, setTxt] = useState('안녕하세요.'); useEffect(() => { loadData(); }, []); const saveData = async (value) ..
[react native] 로또 번호 생성기 import { StatusBar } from 'expo-status-bar'; import React, { useEffect, useState } from 'react'; import { Button, StyleSheet, Text, View } from 'react-native'; export default function App() { const [lotto, setLotto] = useState([]); function makeLotto(){ let i = 0; let lnumber = []; let rnumber = 0; let lottos = []; let a = 0; for(i=1; i
react native useEffect 의 변수할당이 안될경우 해결방법 function test(){ const [page, setPage] = useState(0); const [refreshing, setRefresh] = useState(false); const onRefresh = () => { setPage(10); // 이 부분이 적용 안됨. setRefresh(true); // 이 부분이 적용 안됨 } } 위와 같이 했는데... onRefresh가 호출은 되지만 변수가 변경이 되지 않는 문제가 있다. 이럴때는 아래와 같이 변경하므로써 해결 가능하다. const onRefresh = useCallback(async () => { setPage(0); setRefresh(false); }, [refreshing]); 참고용 메모..
react native webVIew를 HOOK으로 호출할떄 ref사용방법 export default function App() { const wvRef = useRef(); return( ); function test(){ let text = "123123"; wvREF.current.injectJavaScript(`(function(){ window.alert('`+text+`'); })(); `); }; } HOOK형태로 사용할때는 current를 넣어주셔야 합니다. >_
react native webview의 로딩속도가 느릴경우. react native의 webview는 이미지가 다 로딩이 되어야 렌더링이 된다. 그렇기 때문에 lazy 로딩등 이미지 순차로딩을 사용할 경우 빠르게 로딩이 가능하다. jquery 아래에 아래 스크립트를 삽입한다. 이미지 태그를 아래와 같이 다 변경한다. 페이지의 가장 하단에 아래 스크립트를 삽입한다. 이렇게 하면 네이티브 앱과 속도차이가 거의 없는 웹뷰를 제작할 수 있다.

반응형