VSCode에서 React Native 개발 환경을 구성하는 방법

이번에는 VSCode로 React Native 개발 환경을 구성하는 방법을 알려드리겠습니다. VSCode로 React Native 개발 환경을 구성할 때의 주의사항은 무엇인가요?

본 글에서는 VSCode에서 React Native 개발 환경을 구성하는 방법을 소개하고, 자세한 내용은 다음과 같습니다.

1.설치VSCode

2. 플러그인 설치

F1을 누르고 ext install을 입력한 후 Enter를 누르거나

를 사용하세요. React Native Tools

를 설치하려면 반응 네이티브를 입력하세요. 기기에 React Native가 설치되어 있다고 가정하면,

설치되어 있지 않은 경우 npm install -g React-native-cli를 사용하여 설치하세요

아니면 공식 문서를 따르세요

새 RN 프로젝트를 생성하고 VSCode

로 엽니다. 설치가 완료된 후 F1을 누르면 명령에 React Native에 대한 더 많은 옵션이 있는 것을 볼 수 있습니다

React 기본 명령

3. 구성디버그환경

a. 자동 구성

Shift+cmd+D를 입력하거나 아이콘을 클릭하세요

쉬프트+cmd+D

React Native를 선택하세요:

launch.json 파일은 4가지 구성 옵션(디버그 Android, 디버그 iOS, 디버그 iOS, 디버그 iOS

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Debug Android",
      "program": "${workspaceRoot}/.vscode/launchReactNative.js",
      "type": "reactnative",
      "request": "launch",
      "platform": "android",
      "sourceMaps": true,
      "outDir": "${workspaceRoot}/.vscode/.react"
    },
    {
      "name": "Debug iOS",
      "program": "${workspaceRoot}/.vscode/launchReactNative.js",
      "type": "reactnative",
      "request": "launch",
      "platform": "ios",
      "target": "iPhone 5s",
      "sourceMaps": true,
      "outDir": "${workspaceRoot}/.vscode/.react"
    },
    {
      "name": "Attach to packager",
      "program": "${workspaceRoot}/.vscode/launchReactNative.js",
      "type": "reactnative",
      "request": "attach",
      "sourceMaps": true,
      "outDir": "${workspaceRoot}/.vscode/.react"
    },
    {
      "name": "Debug in Exponent",
      "program": "${workspaceRoot}/.vscode/launchReactNative.js",
      "type": "reactnative",
      "request": "launch",
      "platform": "exponent",
      "sourceMaps": true,
      "outDir": "${workspaceRoot}/.vscode/.react"
    }
  ]
}

)을 사용하여 자동으로 생성됩니다. b. 수동 구성

다음으로 구성을 지웁니다

구성 추가 버튼을 클릭하고 구성을 선택하세요

구성 추가

결과는 다음과 같습니다:

{
  "version": "0.2.0",
  "configurations": [
    
  ]
}

여기에서 구성 추가 버튼을 클릭하고 React Native: Debug iOS

를 선택하세요.

구성 옵션

이런 식으로 iOS

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Debug iOS",
      "program": "${workspaceRoot}/.vscode/launchReactNative.js",
      "type": "reactnative",
      "request": "launch",
      "platform": "ios",
      "sourceMaps": true,
      "target": "iPhone 6s",
      "outDir": "${workspaceRoot}/.vscode/.react"
    }
  ]
}

를 실행하도록 구성됩니다. 설정 왼쪽에 있는 옵션을 클릭하면 iOS 디버그 옵션이 있습니다

iOS 디버깅

다음으로 위 옵션의 실행 버튼을 클릭하면 iOS

를 성공적으로 실행할 수 있습니다.

Hello world

이 기사의 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

추천 도서:

위 내용은 VSCode에서 React Native 개발 환경을 구성하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!