개발
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
Overview One of the things we all end up needing to do at some point in our career is...
dev.to
* 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
React Native wheel picker like iOS. Contribute to adityamr15/react-native-wheel-picker-expo development by creating an account on GitHub.
github.com
년도-월 선택은 묶어서 ‘(year)년 (month)월’로 선택 가능하도록 함
Botton Tab Floating Button
React Native: Bottom Tab Navigation Tutorial
Expo Camera
RN + EXPO) 카메라기능 구현
expo-camera는 디바이스의 카메라에 대해 미리보기를 랜더링하는 기능을 제공합니다.또한 미리보기에서 줌, AutoFocus, 화이트 밸런스, 플래시 모드 등 다양한 카메라 기능을 조작할 수 있게 도와줍니
velog.io
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
Explore this post and more from the reactnative community
www.reddit.com
Introduction to Expo Router
Expo Router is an open-source routing library for Universal React Native applications built with Expo.
docs.expo.dev
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
1. Navigation에서의 DeepLink 기본설정 >참고: https://reactnavigation.org/docs/5.x/deep-linking https://reactnavigation.org/docs/5.x/navigation-container 우선 De
velog.io
아직도 Push Notification 으로 고생하세요? (Expo-Notifications)
아직도 Push Notification 으로 고생하세요? (Expo-Notifications)
FCM을 사용할려고 무수한 노력을 하였지만 eject의 고통이 너무 심해 expo에서 지원해주는 expo-notifications을 사용해보기로 하였다.
velog.io
React navigation
navigate vs Push
https://velog.io/@hye_rin/ReactNavigation-나만-몰라-navigate랑-push-차이점
[ReactNavigation] 나만 몰라 navigate랑 push 차이점 🫠
👩🏻💻 공통점과 차이점에 대하여
velog.io
parameter 바꿔 화면 재사용할때는 push로 사용하기
goBack()으로 돌아갈때 이전 화면 상태 refresh/reload
React Navigation
reactnavigation.org
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
Did you get any requirements to find Weeks of the Month? Here you will learn how to use Moment JS and Moment Range to find all the Weeks of particular Month. We have explained required javascript code here.
www.logisticinfotech.com
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 패턴 분할하기
11-1. MVC 패턴이란? MVC 패턴은 'Model, View, Controller' 를 뜻하는데 프로젝트 구...
blog.naver.com
정규식
📚 JavaScript 정규 표현식 문법 총정리 + 응용 예제
정규 표현식(Regular Expression) 정규식(Regular Expression)은 문자열에서 특정 내용을 찾거나 대체 또는 발췌하는데 사용된다. 대표적으로 입력칸에 전화번호나 이메일을 입력하라고 했을때 옳지 않은
inpa.tistory.com
숫자 범위 지정
https://jamesdreaming.tistory.com/201
[ 자바 코딩 ] Java Regular Expression 정규표현식 - 로또 번호 패턴 만들기
안녕하세요. 제임스 입니다. 이번 포스팅에서는 정규표현식을 이용하여 특정 숫자의 범위를 지정하는 방법에 대해 알아 보겠습니다. 이번 글을 사실 앞서 포스팅한 표현식중에 사용된 적이 있
jamesdreaming.tistory.com
SafeAreaView
react-native 에서 제공하는 SafeAreaView 의 경우, 현재 iOS 버전 11 이상이 설치된 iOS 기기에만 적용
안드로이드에서 사용 시, react-native-safe-area-context 설치가 필요
https://spartacodingclub.kr/community/fastqna/all/62d3dd55560ed3e600310838/SafeAreaView%20관련%20질문
스파르타코딩클럽 커뮤니티 | 스파르타코딩클럽 수강생이라면 누구나
나만 놓칠 수 없는 이야기들이 가득한 자유게시판, 코딩하다 막히면 바로 질문하는 즉문즉답, 개발일지 모음까지
spartacodingclub.kr
Expo Warning 문구 숨기기
import { LogBox } from 'react-native';
LogBox.ignoreLogs(['Warning: ...']); // Ignore log notification by message
LogBox.ignoreAllLogs();//Ignore all log notifications
How do you hide the warnings in React Native iOS simulator?
I just upgraded my React Native and now the iOS simulator has a bunch of warnings. Besides fixing them, how do I hide these warnings so that I can see what's underneath?
stackoverflow.com
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?
My React app allows users to upload profile images. This is done by uploading the image to an Amazon S3 bucket and storing the path to the image in my database, along with the date and time the ima...
stackoverflow.com
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);
}
Expo get unique device id without ejecting
This library allows you to get unique device id / Mac address of Android devices, which doesn't change after reinstallation. Expo.Constants.deviceId changes after every reinstallation (even if the...
stackoverflow.com
'Framework > React Native' 카테고리의 다른 글
[RN][Expo] 배포 (1) | 2023.11.30 |
---|---|
[RN][Expo] SyncSchedule 개발 도움 Document 정리 (0) | 2023.11.01 |
[RN][Expo] Axios 를 이용해 API(Spring)와 통신 (0) | 2023.08.13 |
[RN][Expo] expo-media-library 앨범 사진 onEndReached로 계속 가져오기 (0) | 2023.08.01 |
[RN][Expo] expo-media-library 적용 (0) | 2023.08.01 |