Project 6

[React Native(RN)] Stack Screen 헤더 스타일 설정과 오류 해결 (backgroundColor, fontSize, color, fontWeight, headerShadowVisible, options 오류 메시지)

- 사용 언어: Typescript- 사용한 라이브러리: @react-navigation/native-stack npm install @react-navigation/native-stack코드Stack Screen의 헤더를 커스텀하기 위한 코드를 작성했습니다.options에서 설정을 적용하면 되는데, 적용할 설정이 많아서 options를 따로 선언해주었습니다.import { createNativeStackNavigator } from "@react-navigation/native-stack";type StackParamList = { Screen1: undefined; Screen2: undefined;}const Stack = createNativeStackNavigator();return ..

[React Native (RN)] 기본 캘린더 화면 구현하기 (react-native-calendars, Typescript)

React Native 기본 캘린더 화면을 구현합니다.Typescript로 작성되었으며, react-native-calendars 라이브러리를 사용합니다. https://github.com/wix/react-native-calendars GitHub - wix/react-native-calendars: React Native Calendar Components 🗓️ 📆React Native Calendar Components 🗓️ 📆 . Contribute to wix/react-native-calendars development by creating an account on GitHub.github.com구현1. react-native-calendars 라이브러리 설치npm install rea..

[React Native (RN)] 소셜 로그인 구현하기 (카카오, 안드로이드)

React Native로 안드로이드 카카오 로그인을 구현해보겠습니다.해당 게시글에서는 react-native-seoul/kakao-login 라이브러리를 사용합니다. https://github.com/crossplatformkorea/react-native-kakao-login GitHub - crossplatformkorea/react-native-kakao-login: react-native native module for Kakao sign in.react-native native module for Kakao sign in. Contribute to crossplatformkorea/react-native-kakao-login development by creating an account on G..

[VSCode Error] npm : 이 시스템에서 스크립트를 실행할 수 없으므로 C:\Users\사용자명\AppData\Roaming\npm\npm.ps1 파일을 로드할 수 없습니다.

VS Code에서 npm start 할 때 아래와 같은 에러가 발생했다.[Error] npm : 이 시스템에서 스크립트를 실행할 수 없으므로 C:\Users\사용자명\AppData\Roaming\npm\npm.ps1 파일을 로드할 수 없습니다.원인1. 환경 변수 확인최근에 드라이브 정리를 하느라 node.exe가 포함된 폴더의 위치를 C → E로 변경했다.이때 환경 변수도 편집을 해줘야하는데 하지 않았기 때문에 발생한 오류이다. 2. PowerShell ExecutionPolicy 확인node.js에 대한 환경 변수 위치도 올바르다면 PowerShell의 ExecutionPolicy를 변경하면 된다.(1번이 원인이었던 경우, 생략 가능)해결 방법1. 환경 변수 확인시스템 속성에서 환경 변수를 누른다. 시..

[React Native] Expo 프로젝트 생성 (최신 버전)

1) 프로젝트 생성 및 종속성 설치create-expo-app으로 프로젝트를 생성합니다.npx create-expo-app@latest 프로젝트 명을 설정한 후 다운로드를 기다립니다. 프로젝트 폴더로 cd 합니다.cd (프로젝트 명) 2) Expo 로그인프로젝트 실행 전 Expo 로그인을 진행해야 합니다. 컴퓨터, 단말기 둘 다 로그인이 수행되어야 합니다. 계정이 없을 경우 다음 사이트에서 계정 생성을 하시면 됩니다.https://expo.dev/signup Sign Up — ExpoCreate an account for Expo here.expo.dev 2-1) PC 로그인Terminal에 다음과 같이 입력합니다. (powershell X)expo login 아이디와 비밀번호를 입력하여 로그인을 해줍니..

[React Native] 00. Expo 프로젝트 생성

Expo 프로젝트를 생성하기 전에 Node.js 버전을 확인하세요.이 글은 Node.js 버전이 17 이상일 경우의 프로젝트 생성 방법입니다. 1) 프로젝트 생성 및 종속성 설치Terminal에 다음과 같이 입력합니다.npx create-expo-app (생성할 프로젝트 이름) --template blank 다운로드를 진행합니다. 저는 단말기에서 프로젝트를 실행하기 위해 제 폰에 Expo Go 앱을 설치했습니다.(Google Play Store → Expo app 다운로드) 웹에서도 프로젝트를 실행하기 위해서는 종속성을 따로 설치해줘야 합니다.npx expo install react-dom react-native-web @expo/metro-runtime 프로젝트를 보면 App.js 파일이 있습니다. 이..

728x90
반응형