[RN][Expo] Semi-Calories 개발 도움됐던 Document 정리

개발 

React Native

Expo

JavaScript

 

Donut chart

https://dev.to/franciscomendes10866/how-to-create-a-donut-chart-using-react-native-svg-30m9

How to Create a Donut Chart using React Native SVG

* animation version.

https://www.youtube.com/watch?v=x2LtzCxbWI0 

 

 

Bottom Sheet

@gorhom/bottom-sheet@^4 : 많이 쓰이지만, Dependencies때문에 사용x

react-native-raw-bottom-sheet : raw한 형태

 

 

Picker

react-native-wheel-pick : expo 환경에서 동작x

react-native-month-year-picker : expo 환경에서 동작x

@react-native-picker/picker : expo 환경에서 동작o, wheel 이 멈추지 않음

react-native-wheel-picker-expo : expo 환경에서 동작o, onPress props 없어서 따로 버튼 만들어야함

https://github.com/adityamr15/react-native-wheel-picker-expo

GitHub - adityamr15/react-native-wheel-picker-expo: React Native wheel picker like iOS

년도-월 선택은 묶어서 ‘(year)년 (month)월’로 선택 가능하도록 함

 

 

 

Botton Tab Floating Button

React Native: Bottom Tab Navigation Tutorial

 

 

Expo Camera

RN + EXPO) 카메라기능 구현

RN + EXPO) 카메라기능 구현

 

 

Expo router vs React navigation

React navigation은 오래된 방법 중 하나. stack구조로 화면을 연결

Expo router은 file 기반 라우팅 방식. <Link />컴포넌트를 통해 화면 이동

⇒ 둘 중 expo router가 구현하기 쉬움. 딥링크 처리도 쉬움

Expo-router vs React Navigation

From the reactnative community on Reddit

Introduction to Expo Router

Introduction to Expo Router

https://www.youtube.com/watch?v=yyGS0adZdsU&list=LL&index=7&t=5351s 

 

 

 

Deep Link

https://velog.io/@hamster/Expo에서-React-Navigation과-DeepLink

Expo에서 React Navigation과 DeepLink

아직도 Push Notification 으로 고생하세요? (Expo-Notifications)

아직도 Push Notification 으로 고생하세요? (Expo-Notifications)

 

 

 

React navigation

navigate vs Push

https://velog.io/@hye_rin/ReactNavigation-나만-몰라-navigate랑-push-차이점

[ReactNavigation] 나만 몰라 navigate랑 push 차이점 🫠

parameter 바꿔 화면 재사용할때는 push로 사용하기

 

goBack()으로 돌아갈때 이전 화면 상태 refresh/reload

https://reactnavigation.org/docs/function-after-focusing-screen/#triggering-an-action-with-a-focus-event-listener

React Navigation

 

 

 

Moment로 월의 주차들(시작, 끝) 구하기

https://www.logisticinfotech.com/blog/find-weeks-of-month-with-javascript-moment-and-moment-range/

Find weeks of the month with Javascript Moment JS and Moment Range

moment-range 패키지 설치해야함

https://github.com/rotaready/moment-range

 

 

TextInput 한글 분리

검색 TextInput에 text 입력할때마다 검색하므로 한글 분리 현상 o 

=>  value 부분을 빼서 해결

<TextInput
    style={styles.searchInput}
    //value={text}
    onChangeText={onChangeText}
/>

 

 

 

https://m.blog.naver.com/sejun3278/221575009683

React로 블로그 만들기 11 : MVC 패턴 분할하기

 

 

정규식

https://inpa.tistory.com/entry/JS-%F0%9F%93%9A-%EC%A0%95%EA%B7%9C%EC%8B%9D-RegExp-%EB%88%84%EA%B5%AC%EB%82%98-%EC%9D%B4%ED%95%B4%ED%95%98%EA%B8%B0-%EC%89%BD%EA%B2%8C-%EC%A0%95%EB%A6%AC

📚 JavaScript 정규 표현식 문법 총정리 + 응용 예제

숫자 범위 지정

https://jamesdreaming.tistory.com/201

[ 자바 코딩 ] Java Regular Expression 정규표현식 - 로또 번호 패턴 만들기

 

 

SafeAreaView

react-native 에서 제공하는 SafeAreaView 의 경우, 현재 iOS 버전 11 이상이 설치된 iOS 기기에만 적용

안드로이드에서 사용 시, react-native-safe-area-context 설치가 필요

https://spartacodingclub.kr/community/fastqna/all/62d3dd55560ed3e600310838/SafeAreaView%20관련%20질문

스파르타코딩클럽 커뮤니티 | 스파르타코딩클럽 수강생이라면 누구나

 

 

 Expo Warning 문구  숨기기

import { LogBox } from 'react-native';
LogBox.ignoreLogs(['Warning: ...']); // Ignore log notification by message
LogBox.ignoreAllLogs();//Ignore all log notifications

https://stackoverflow.com/questions/35309385/how-do-you-hide-the-warnings-in-react-native-ios-simulator

How do you hide the warnings in React Native iOS simulator?

 

 

React Native Image reload 강제

동일한 url로 다른 이미지 띄우면 cache 때문에 reload가 안됨  -> image url뒤에 timestamp 붙이기

setState({
   imageSrc: '...',
   imageHash: Date.now()
})

render(){
  return(
      <img src={`${imageSrc}?${imageHash}`} />
  )
}

https://stackoverflow.com/questions/47922687/force-react-to-reload-an-image-file

Force React to reload an image file?

 

 

Expo device별 unique id

앱 권한 관련해서 modal 띄울때, 기기별 처음 접근에만 띄워야 함

expo-constants 의 Constants.deviceId는 더이상 사용되지 않음

=> 고유식별자 uuid와 expo SecureStore을 사용!

try {
    const deviceId = await SecureStore.getItemAsync('secure_deviceId');
    if (deviceId === null) {
        // 처음 진입하는 사용자
        setModalVisible(true)
        let uuid = uuidv4();
        await SecureStore.setItemAsync('secure_deviceId', JSON.stringify(uuid));
    } else {
        // 이미 진입한 사용자
        console.log('이미 진입한 적이 있습니다.');
    }
} catch (error) {
    console.error('SecureStore 에러: ', error);
}

 

https://stackoverflow.com/questions/46863644/expo-get-unique-device-id-without-ejecting/68553627#68553627

Expo get unique device id without ejecting