Android 개발 React Native 프로젝트 생성 및 환경 구축

먼저 RNDemo의 효과를 살펴 보겠습니다. 여기에 대해 불평해야합니다. 솔직히 말해서 RN은 결국 js 성능이 뛰어나고 기본적으로 부드럽 지 않습니다. 효과를 보면 알 수 있습니다.

먼저 NodeJS를 설치해야합니다. React Native (RN이라고 함, 나중에 RN이라고 함) 자체가 Javascript 언어와 React 언어를 기반으로하기 때문입니다. 나중에 모든 파일에 .js가 붙는 것을 알 수 있습니다. 따라서 NodeJS는 파일을 컴파일하는 데 필요하며 나중에 소개 할 것처럼 Node 명령을 사용하여 RN 프로젝트를 초기화하고 필요한 모든 node_modules 패키지를 다운로드해야합니다. 좋아, 말도 안되는 얘기는하지 말자. 시작합시다.

NodeJS를 설치했다면 npm 명령어를 사용하면됩니다. 그렇지 않으면 명령어를 찾을 수 없습니다. 먼저 Android Studio에서 RN을 사용하는 방법을 소개하겠습니다.

1. Android Studio를 사용하여 "RNDemo"와 같은 빈 프로젝트를 생성하지만, Android 프로젝트를 생성 할 때주의해야합니다. 최소 SDK는 현재 최소 API16을 지원하므로 mini API16 이상으로 생성하는 것이 좋습니다.

2. Android 데모 프로젝트가 생성 된 후 터미널을 클릭합니다 (루트 디렉토리에서 실행해야합니다).

다음으로 다음 코드를 실행합니다.

npm 초기화

npm install --save react-native 반응

노트:

init는 주로 미리 알림을 기반으로 package.json 파일을 생성합니다.

install --save react-native 安装 React 和 React 네이티브

그런 다음 브라우저에서 https://raw.githubusercontent.com/facebook/react-native/master/.flowconfig를 엽니 다.

파일을 다운로드하고 루트 디렉터리에 저장합니다.

3. 구성 내용 추가 및 수정

1. package.json 파일 수정

2. 항목 js 파일 만들기

3. 빌드 파일 구성 추가

build.gradle (Module : app) 添加：

defaultConfig {
       ...
        ndk {
            abiFilters "armeabi-v7a", "x86"
        }
    }

android {
    ...
    configurations.all {
        resolutionStrategy.force 'com.google.code.findbugs:jsr305:+'
    }
}

compile "com.facebook.react:react-native:+"

build.gradle (프로젝트 : 응용 프로그램) 添加：

allprojects {
    repositories {
        jcenter()
        maven {
            // All of React Native (JS, Android binaries) is installed from npm
            url "$rootDir/node_modules/react-native/android"
        }
    }
}

4. 매니페스트 파일 구성 :

5. Activity는 ReactActivity를 상속하고, Application은 ReactApplication을 구현합니다.

매니페스트 이름에 MyApplication을 추가합니다.

모든 준비가 완료되면 'App'을 실행 한 다음 터미널에서 react-native start 명령을 입력합니다. 참고 (실제 머신 인 경우이 tcp : 8081 tcp : 8081 이전에 adb reverse를 실행하여 포트 8081이 실제 머신에 연결되었는지 확인해야합니다. 포트 번호를 차지하지 마십시오)

앱을 패키징해야하는 경우 먼저 android / app / src / main 아래에 새 자산 디렉토리를 만든 다음 터미널 명령 줄에 입력해야합니다.

react-native bundle --platform android --dev false --entry-file index.android.js --bundle-output app/src/main/assets/index.android.bundle --assets-dest app/src/main/res/

그러면 생성 한 자산 디렉토리에 두 개의 번들 파일이 생성되며 패키지화 할 수 있습니다.

4. 마지막으로 RN 프로그래밍 방법

먼저 반응 언어와 자바 스크립트 언어의 기본 사항을 이해 한 후 Webstorm을 설치하는 것이 가장 좋습니다. 다른 소프트웨어도 사용할 수 있습니다. 그러나 Webstorm은 현재 가장 인기 있고 사용하기 가장 좋습니다. 모든 기본 작업은 AndroidStudio 개발 도구와 유사합니다. Webstorm을 사용하는 것이 더 편리합니다. Webstorm은 React Native 프로젝트를 직접 생성 할 수 있습니다 .Android 및 IOS 프로젝트는 자동으로 생성되며 직접 사용할 수 있습니다.

소스 코드

Android 개발 React Native 프로젝트 생성 및 환경 구축

추천