728x90

Development/ReactNative 33

[study] swiper

swiper가 적용이 안되어서, swipeable을 써보기도 하고, 별의별 방법을 며칠 동안 다 시도해 보았다. 결국 버튼을 이용해 개발 업데이트를 진행했는데, 역시나 계속 시도해 보고, 알아보니 해결되었다. 생각보다 간단해 허무하기도 했다. 해결 : swiper를 presseble이 감싸고 있었기 때문에 적용이 안되었던 것. 예) ... TouchableOpacity로 감싸도 마찬가지였다. 페이지에 컴포넌트가 두 개인 상황이었고, 아래 컴포넌트를 이용 중 위 컴포넌트를 눌렀을 때 아래 컴포넌트의 내용이 reset 될 수 있게 하려고 swiper가 있는 위 컴포넌트를 presseble로 감싸 onPress속성으로 setState를 적용하고 있었다. 예) setState(! state)}> ... *st..

[study] .map : array안에 object 형태로 추가하기 - 240111

@ map - array에 object 넣기 문제 : const [images, setImages] = useState([]); const images = res.assets.map( item => { const image= { name:item.fileName, type:item.type, uri:item.uri } return image }) setImages([image]) // images가 빈 배열이라 바로 setImages에 담았고, 하나의 array가 되었다. 다만, 기존에 있는 배열에 image를 추가하고 싶은 경우라면 const images = res.assets.map( item => { const image= { name:item.fileName, type:item.type, uri:..

[study] reactNative - 240111

장점 : -하나의 코드로 관리, 러닝커브 높은 React사용 -코드푸시로 빠른 업데이트 -> 비용절감 -FastRefresh -오픈소스 플랫폼 단점 : -일부기능 Native접근 필요 -오픈소스, 라이브러리 의존도 -성능 -잦은 업데이트 Event를 전달하기 위한 함수를 제공 -onCreate:애플리케이션 실행될 때 최초 호출 -onTerminate:애플리케이션 종료될 때 호출 Manifest : android 앱의 메타정보를 요약해서 선언해둔것

[study] react-native-kakao-share-link

카카오로 공유하기 기능 적용 아래 사이트를 보고 잘 안 되는 부분만 복습할 겸 기록해 둔다. https://github.com/millo-L/react-native-kakao-share-link GitHub - millo-L/react-native-kakao-share-link: 리액트 네이티브 카카오 링크 오픈 소스 리액트 네이티브 카카오 링크 오픈 소스 . Contribute to millo-L/react-native-kakao-share-link development by creating an account on GitHub. github.com 1. npm install react-native-kakao-share-link 2. ios >> xcode 프로젝트 info 탭 >> url types ..

[study] react-native 프로젝트를 파이어베이스와 연동하기

https://firebase.google.com/?hl=ko Firebase | Google’s Mobile and Web App Development Platform 개발자가 사용자가 좋아할 만한 앱과 게임을 빌드하도록 지원하는 Google의 모바일 및 웹 앱 개발 플랫폼인 Firebase에 대해 알아보세요. firebase.google.com 1. 시작하기 눌러 프로젝트를 생성한다. 2. ios / android 앱 연동하기 - ios : Apple번들ID --> xcode 최상단 프로젝트 폴더 클릭 > Singnign&Capabilities탭 >> IOS 박스에 있는 BundleIdentifier를 복사하여 붙여넣는다. (분홍색박스) 구성파일 다운로드하여 드래그하여 붙여넣는다(빨간색박스) -안드로..

[study] reactnative 프로젝트 만들기

공부를 할 때마다 새롭게 알게되는 부분이 많은데, 한 폴더에 계속 누적하다보니 명확히 알 수 없고, 읽기 복잡하기도해서 앞으로는 새로운 것을 배울 때마다 새로운 프로젝트를 만들어 commit 하기로 했다. vscode >>root폴더(프로젝트를 계속 누적할 곳) npx react-native init 'fileName' ++ 가끔 npm start를 할 때 안드로이드/ ios가 잘 안열리는 경우가 있는데 내가 알게 된 문제 해결 -안드로이드 androidStudio >> fileName을 오픈하는 것이 아닌 androidStudio >> fileName >> android폴더를 오픈한다. 이후 프로젝트의 jdk 설정이라던지, nativeModule 작업을 하기 쉬웠다. -ios xcode >> fileN..

[study] 20240103 react-native-reanimated

react-native-reanimated *worklet -작은 조각의 javascript 조각 -뷰 속성을 업데이트 하거나, 이벤트에 반응할 때 UI Thread에서 바로 실행시킬 수 있는 JS조각 생성방법 : 함수 상단에 worklet이라는 string 추가 예) const funcA=()=>{ "worklet" ... } *SharedValues -Js Thread와 Main Thread 모두에서 읽기 또는 수정이 가능 한 값 Main Thread에서는 값이 변경됨을 바로 감지할 수 있어 읽기에 특화됨 -useAnimatedScrollHandler hook -setValue directly 예) const scrollOffset = useAnimatedScrollHandler({ onScroll:..

[study] 240102

reactNative 장점 : -하나의 코드로 관리, 러닝커브 높은 React사용 -코드푸시로 빠른 업데이트 -> 비용절감 -FastRefresh -오픈소스 플랫폼 단점 : -일부기능 Native접근 필요 -오픈소스, 라이브러리 의존도 -성능 -잦은 업데이트 안드로이드 application에서 전체 앱 상태를 관리하는 class Event를 전달하기 위한 함수를 제공 -onCreate:어플리케이션 실행될때 최초 호출 -onTerminate:어플리케이션 종료될 때 호출 Manifest : android 앱의 메타정보를 요약해서 선언해둔것 Permissions 자주 사용하는 권한 #1 사진관련 ios - NSPhotoLibraryUsageDescription Android - READ_EXTERNAL_STO..

728x90