React Native Typescript 애플리케이션 부팅

표지 사진: 사진작가Muhammad Rosyid Izzulkhaq
자바스크립트 개발자에게 우리는 모두 유행하는 어린이의 이야기를 들은 적이 있다고 나는 확신한다.내가 말한 것은 React Native(플랫폼을 뛰어넘는 모바일 응용 개발 라이브러리)와 Typescript(정적 유형을 가진 자바스크립트 초집합)이다.
만약 당신이Typescript를 아직 들어보지 못했다면, 여기에 블로그 글Introduction to Typescript and its Basic Types을 참고할 수 있습니다.

선결 조건

Javascript와React에 대한 기본 이해

React Native에 대한 개발 환경이 설정되어 있지 않은 경우 React Native Environment Setup Guide 참조

소개하다.

본고에서 우리는 building-in-public 시리즈를 시작할 것이다. 여기서 우리는 Typescript 지원을 사용하여 새로운React 원생 프로젝트를 초기화하는 방법을 배울 것이다.
모든 프로젝트 파일을 포함하는 예시 프로그램을 초기화하는 데 중심을 두겠습니다.
더 이상 귀찮게 할 필요 없어, 우리 시작하자!

새 로컬 응용 프로그램 초기화

Cd를 응용 프로그램을 만들 폴더에 넣습니다.

나에게 그 폴더는 projects이다.
폴더에 있을 때 다음 명령을 실행하여 typescript를 지원하는 새 react 네이티브 응용 프로그램을 만듭니다.

react-native init truth --template react-native-template-typescript

위의 명령은 공식 react-native-cli 으로 truth 이라는 새 프로그램을 만들고 typescript를 지원하는 템플릿을 설치합니다.상기 코드가 정상적으로 작동하려면 기계에 react-native-cli 패키지를 전역적으로 설치해야 합니다.react-native-cli 글로벌 패키지를 설치하지 않으려면 아래의 코드를 실행하여 같은 결과를 얻을 수 있습니다.이렇게:

npx react-native init truth --template react-native-template-typescript

응용 프로그램 항목 디렉토리에 Cd를 넣습니다.

cd truth

위의 코드는 우리가 새로 만든 프로그램 폴더를 내비게이션할 수 있도록 합니다.

선택한 코드 편집기에서 프로그램을 엽니다.

응용 프로그램 폴더 구조는 다음과 같습니다.

구성 완료

만약 위의 프로젝트 구조도를 보면, 우리는 tsconfig.json 파일을 발견할 수 있을 것이다.이것이 바로 우리의 typescript 설정이 있는 파일입니다.
프로그램을 계속 실행하기 전에, 폴더 접근과 내비게이션을 위해 프로젝트에 사용자 정의 경로 맵을 추가해야 합니다.
이 경우:

tsconfig.json 파일을 열고 메모된 다음 코드 줄을 찾습니다.

"baseUrl": './',
"paths": {},

baseUrl 행의 주석을 취소하고 paths 행을 다음 코드로 바꿉니다.

"paths": {
  "*": ["src/*"],
  "tests": ["tests/*"],
  "@components/*": ["src/components/*"],
},

기본 URL 경로를 프로젝트 루트 폴더로 설정하고 위 코드에 추가된 경로로 자동으로 해석되는 경로를 추가합니다.* 경로 설정src 폴더의 기본 경로입니다. 이 폴더는 나중에 만들겠습니다.src 폴더는 응용 프로그램의 모든 코드 파일이 있는 위치입니다.tests 경로는 typescript 읽기 tests 폴더의 모든 파일을 알려줍니다.테스트를 실행할 때 매우 유용하다.@components/* 경로는components 폴더의 모든 파일을 읽는 데 사용됩니다.우리는 앞으로도 이 폴더를 만들 것이다.

프로젝트 의존항에 babel-plugin-module-resolver을 추가하여 사용자 정의 경로 맵을 분석합니다.

응용 프로그램 루트 폴더의 터미널에서 다음 코드를 실행합니다

npm install -D babel-plugin-module-resolver

패키지에 babel-plugin-module-resolver가 추가됩니다.json 개발 의존항.

파일 찾기 및 업데이트babel.config.js

프로젝트 루트babel.config.js 파일을 열면 다음과 같은 파일이 나타납니다.

module.exports = {
  presets: ['module:metro-react-native-babel-preset'],
};

presets 구성이 있는 행 뒤에 다음 코드를 추가합니다.

plugins: [
  [
    'module-resolver',
    {
      root: ['./src'],
      extensions: ['.ios.js', '.android.js', '.js', '.ts', '.tsx', '.json'],
      alias: {
        tests: ['./tests/'],
        '@components': './src/components',
      },
    },
  ],
],

이 설정은 babel로 하여금 우리가 이전에 추가한 typescript 설정을 해석할 수 있게 합니다.
현재 우리는 우리의 프로그램을 계속 실행하고 테스트를 진행할 수 있다.

어플리케이션 실행(Android)

새로 만든 프로그램을 실행하기 위해서, 우리는 Android Studio에서 제공하는android 아날로그를 사용하여 우리 프로그램의android 버전을 테스트할 것입니다.

첫걸음

선택한 시뮬레이터를 시작합니다.가상 장치가 실행 중인지 확인하십시오.Android Studio를 사용하는 경우 터미널에 다음 코드를 입력하여 확인할 수 있습니다.

adb devices

응용 프로그램을 실행하는 데 사용할 수 있는 장치 목록이 표시됩니다.

두 번째 단계

프로젝트 루트 디렉터리에 있는 package.json 파일을 열고 사용 가능한 'scripts'를 관찰합니다.
응용 프로그램을 시작하려면 터미널에서 다음 코드를 실행합니다.

npm run android

이것은 패키지의 "android" 부분에서 "scripts" 명령을 실행할 것이다.json 파일, 이 파일은 가상 장치에서 프로그램을 실행하고 설치합니다.
가상 디바이스에 애플리케이션을 설치한 후다음 그림과 같이 프레젠테이션 프로그램이 가상 장치에서 열려 있는 것을 보실 수 있습니다.

리소스:

Android Studio에 익숙하지 않은 경우 Official Android Studio Documentation에서 자세한 내용을 확인하십시오.

React 본체 응용 프로그램을 실행하는 더욱 깊은 방법은 Official React Native Documentation을 참조하십시오.

결론

봐라!🎉🎉🎉
Typescript 지원이 있는 React 본체 프로그램을 0부터 만들고 설정합니다.
그런 다음 React Navigation을 사용하여 애플리케이션에 대한 인증/승인 라우트를 설정합니다.
감사합니다. 다음 댓글 또 만나요.