ReactNative

Expo 설치 후 로그인을 위해서 expo login을 실행하였으나 스크립트 실행 권한 제한( 보안오류 )로 인해 실행 안됨.스크립트 실행 권한 변경(PowerShell)PowerShell 관리자 권한으로 실행터미널에 get-help Set-ExecutionPolicy

Expo 설치 및 로그인 후 실행을 시키려고 할 때 다음과 같은 에러가 발생하였다.Network response timed out.방화벽 설정고급설정인바운드 규칙새 규칙포트 선택특정포트에 19000, 19001 추가연결허용전체 선택규칙 이름 생성(react-native

방화벽을 설정한 후에도 expo start 또는 npm start를 해도 Expo에서 Starting Metro Bundler. 오류가 발생을 하고 여전히 timed out.에러가 표시되었다.Expo에서 기존 LAN으로 연결되어 있던 것을 Tunnel로 연결하였다.명령

React Native는 웹사이트가 아니다!div 같은 태그 사용할 수 없다.div -> View 태그 사용React Native에 있는 모든 text는 text Component 안에 들어가야 한다!p, span 태그 -> Text 태그 사용사용할 수 없는 style

웹에서는 display: flex를 해주어야 하지만 앱에서는 View 기본 정렬 속성이 Flex이기 때문에 별도로 display: flex를 해주지 않아도 됨. ▶ Flex 정렬 Web에서는 row(가로정렬)가 기본(display: flex)App에서는 column(세

스크린을 넘겨서 화면 이동하는 기능▶ Link to https://reactnative.dev/docs/scrollviewScrollView에서 Style을 지정하고 싶다면?contentContainerStyle 사용▶ Link to https://r

3\. Location

4. Icon

▶ Refer to https://reactnative.dev/docs/touchableopacityView와 비슷한 종류로 누르는 이벤트를 listen 할 준비가 되어있는 ViewOpacity(투명도)가 들어있는 이유는 애니메이션 효과가 있기 때문.▶ Ref

▶ Refer to https://reactnative.dev/docs/textinput▶ Refer to https://reactnative.dev/docs/textinput- onChangeText(callback)▶ Refer to https&#

# Code # Return

state 변경 시 리랜더링이 너무 많이 일어나 발생하는 에러state 변경되는 함수에서 무한루프 발생 화살표함수로 해결

▶ Link to https://reactnative.dev/docs/environment-setupReactNative CLIDevelopment OS : WindowsTarget OS : Androidchocolatey 다운로드

기본 뼈대npx react-native init AwesomeProjectigniteRN 앱을 생성해주는 CLI(Command-Line Interface)

npm install @react-navigation/bottom-tabsNavitaion을 사용할 때에는 NavigationContainer로 감싸주어야 한다.<Tab.Screen>의 name은 헤더와 하단 탭명, component는 내용을 나타낸다.

useColorScheme()react-native API▶ Refer to https://reactnative.dev/docs/usecolorschemeThemesreact-navigation▶ Refer to https://reactnavigati

npm i react-native-vector-iconsandroid/app/build.gradle 추가android/settings.gradle 추가android/app/build.gradle 추가node_modules/react-native-vector-icons/

▶ Refer to https://reactnavigation.org/docs/bottom-tab-navigatorFunction that given { focused: boolean, color: string, size: number } returns a R

npm install @react-navigation/native-stack● navigation prop > https://reactnavigation.org/docs/navigation-prop● Native Stack Navigator > https&#x

CSS 코드를 Native Component가 써도 스타일 적용됨npm i styled-components뒤에 /native는 꼭 써줘야함!\-> styled Components는 브라우저에서도 작동하기 때문에 native에서 사용하는 태그(?)를 위해서styled C

스타일 컴포넌트에서도 다크모드를 적용할 수 있다현재 적용된 스키마를 확인한다<ThemeProvider />를 통해서 현재 테마의 다크모드 여부에 따라 적용한다<ThemeProvider />가 네비게이터 컨테이너를 감싸고 있기 때문에 하위 컴포넌트들에게 테마

https://github.com/reactrondev/react-native-web-swiper # Props loop swiper 끝까지 가면 맨 처음화면으로 돌아옴 timeout `` 2초마다 swiper controlsEnabled controlsEnabl

▶ Passing parameters to routes https://reactnavigation.org/docs/params/navigation.setOptions는 헤더(타이틀) 변경 시에 사용합니다.▶ Refer to https://reactna

리액트 네이티브 생성설치npx react-native init \[AwesomeProject]Metro 실행npm start || npx react-native start어플리케이션 실행npm run android || npm run ios

박스 터치를 하면 0.01초?마다 1px씩 이동하며 y축이 200이 되면 clearInterval

value는 Animated.Value()를 쓴다.state에 value를 넣지 않는다value 값을 직접 정하지 않는다.Animated API를 사용하여 value값을 준다.Animatable components에만 Animation을 줄 수 있다.아무 컴포넌트에다가

다이어리 앱 1. 리액트 네이티브 설치 2. MongoDB Realm 활용

오픈소스로 모바일에 최적화된 데이터베이스 라이브러리이다.Realm의 데이터는 쿼리, 필터링, 상호연결이 가능하고 저장이 된다.Realm은 객체 형태로 데이터를 읽어오고 객체 형태로 DB에 저장이 가능하다.▶ Refer to https://docs.mongodb