React Native 실전 (2): 안 드 로 이 드 패키지

원본 주소:
http://www.csdn.net/article/2015-09-30/2825835-react-native-2 이전 글 은 React Native 의 환경 설정 과 기본 적 인 개발 디 버 깅 을 언급 했다.본 고 는 React Native 의 자원 패 키 지 를 소개 하고, React - native - gradle 플러그 인 을 사용 하여 안 드 로 이 드 앱 의 패 키 지 를 중점적으로 소개 한다.
포장
포장 목적
열 배 치 를 제외 하고 앱 이 실 행 될 때 Debug Server 에서 자원 을 가 져 오 면 안 된다 는 것 을 알 고 있 습 니 다.앱 을 배포 할 때 JS 자원 은 앱 에 포 장 돼 야 한다.
또한 대외 적 으로 발 표 된 설치 패 키 지 는 자원 중의 업무 코드 의 혼동 도 필수 적 이다.
React Native 포장 방식
현재 iOS 는 react - native bundle 명령 으로 포장 할 수 있 으 며, 안 드 로 이 드 지원 작업 도 시작 되 었 습 니 다.그러나 현재 npm 의 최신 버 전 (0.11.4) 은 아직 지원 되 지 않 습 니 다.최신 코드 에 서 는 이미 지원 되 는 것 처럼 보이 지만 아직 최종 적 으로 발표 되 지 않 았 다.공식 적 으로 지원 이 발표 되면 저 는 react - native bundle 명령 으로 포장 하 는 것 을 소개 하 는 글 을 한 편 더 쓰 겠 습 니 다.
현재 안 드 로 이 드 의 React Native 응용 프로그램 은 react - native - gradle 플러그 인 으로 포장 할 수 있 습 니 다.이 플러그 인 은 패키지 파 라 메 터 를 유연 하 게 설정 하고 Gradle Task 를 사용 하여 자원 폴 더 에 자원 을 포장 합 니 다.
그러나 공식 적 으로 는 react - native bundle 명령 을 사용 하여 포장 할 계획 이 며, Gradle 플러그 인 에 대한 지원 을 포기 하 는 경향 이 있 습 니 다.
모두 react - native bundle 을 사용 하여 포장 합 니 다. 개발 자 에 게 는 포장 명령 한 세트 만 파악 하면 됩 니 다.하지만 안 드 로 이 드 개발 자 들 에 게 플러그 인 방식 은 평소 개발 습관 에 더 맞 는 것 같 습 니 다.여러분 스스로 취사선택 하 세 요.
React Native 개발 은 현재 매우 활발 하고 코드 가 자주 바 뀌 며 본 고 에서 논의 한 코드 버 전 은 다음 과 같다.https://github.com/facebook/react-native/tree/0ff3a421c9adbe4137e07e158c9812062b34ea5a 본 논문 에서 현재 가리 키 는 시간 은 2015 년 09 월 28 일 20 시, 태평양 시간 이다.중국 2015 년 09 월 29 일 11 시.react - native - gradle 플러그 인
컴 파일 플러그 인
플러그 인 react - native - gradle: com. facebook. react: gradleplugin: 1.0. + 를 통 해 혼동 및 자원 포장 을 완성 할 수 있 습 니 다.
그러나 이 플러그 인 은 JCenter 나 Maven Centry 에 발표 되 지 않 았 습 니 다.직접 컴 파일 해서 로 컬 Maven 라 이브 러 리 에 발표 해 야 합 니 다.원본 코드 는 react - native - gradle 디 렉 터 리 에 있 습 니 다.문서 에 따라 컴 파일 하여 설치:
mac - 2: react - native - gradle srain $gradle build install 결 과 는 테스트 사례 가 잘못 되 었 습 니 다. 이 문 제 는 공식 적 으로 복구 되 지 않 았 고 방치 되 었 습 니 다.제 시 된 해석 은 앞에서 언급 되 었 다.
우 리 는 테스트 용례 를 뛰 어 넘 고 직접 설치 할 수 있다.공식 적 으로 제공 하 는 테스트 사례 자체 에 문제 가 있어 테스트 를 할 수 없 지만 제 가 직접 테스트 할 수 있 습 니 다.
주제 밖의 말 은 제 시 된 해석 에 대해 매우 신경 을 쓰 지 않 는 것 처럼 보인다. 현재 전체 프로젝트 가 고도 로 활발 하고 문서 와 실제 기능 이 심각하게 어 긋 나 며 일치 하지 않 는 부분 이 많다.어떤 팀 이 든 프로젝트 스트레스 를 받 고 리듬 이 더 이상 우아 하지 않 아 지 는 것 같 습 니 다. 이상 적 인 팀 이란 순간 적 입 니 다.테스트 용례 건 너 뛰 기, 직접 설치:
mac - 2: react - native - gradle srain $gradle install 설치 완료:
mac - 2: react - native - gradle srain $ll ~ /. m2 / reposcory / com / facebook / react / gradleplugin / total 8 drwxr - xr - x 5 srain staff 170 Sep 28 15: 10 1.0.0 - SNAPSHOT - rw - r – r – 1 srain staff 326 Sep 28 15: 10 maven - metadata - local. xml 프로젝트 에서 사용
build. gradle 설정 은 다음 과 같 습 니 다.
[cpp] view plaincopy buildscript {reposcories {mavenLocal () / 로 컬 의존 jcenter ()} dependencies {classpath 'com. android. tools. build: gradle: 1.3.0' classpath 'com. facebook. react: gradleplugin: 1.0. +' / / 플러그 인 의존} app / build. gradle:
[cpp] view plaincopy apply plugin: ‘com.facebook.react’
react {bundleFileName "index. android. bundle" / / assets 디 렉 터 리 에서 js 파일 이름 bundlePath "/ index. android. bundle" / js 경로 jsRoot ".. /" / js 원본 파일 위치 packagerHost "localhost: 8081" / 디버그 서버 주소 packagerCommand ". / node modules / react - native / packager / packager. sh" / / / 패키지 명령 주소

devParams {  
    skip true  
    dev true  
    inlineSourceMap false  
    minify false  
    runModule true  
}  
releaseParams {  
    skip false  
    dev false  
    inlineSourceMap false  
    minify true  
    runModule true  
}  

} 설정 설명
위의 react 항목 의 설정 은 주석 에 설명 되 어 있 습 니 다.그 중에서 packagerCommand 가 공식 적 으로 제시 한 문서 설명 이 잘못 되 었 습 니 다.
devParams 와 releaseParams 는 각각 debug 버 전과 release 버 전의 인자 입 니 다.각각 다섯 개의 인자 가 있 습 니 다. skip 인 자 는 true 이 고 로 컬 자원 에서 불 러 오 는 것 을 건 너 뛰 고 Debug Server 에서 자원 을 요청 합 니 다.false 를 위 한 패키지 자원, 실행 시 로 컬 에서 불 러 옵 니 다.다른 네 개의 인 자 는 url 을 통 해 Debug Server 에 전 달 됩 니 다.예 를 들 면:http://localhost:8081/index.android.bundle?dev=true&inlineSourceMap=true&minify=false&runModule=true。
매개 변수의 의 미 는 다음 과 같다.
dev: 전역 변수 DEV, React Native 핵심 라 이브 러 리 의 개발 옵션 과 같 습 니 다.minify: 헷 갈 려 요.inlineSourceMap: sourcemap 에 가입 할 지 여부 입 니 다.기본 값 은 false 입 니 다.runModule: 기본 값 은 true 입 니 다. 마지막 에 require (XXX) 형식 으로 module 의 입구 점 을 추가 할 지 여부 입 니 다.예 를 들 어: require ("AwesomeProject / index. android. js");인자 의 영문 설명 문 서 는 다음 과 같 습 니 다.https://github.com/facebook/react-native/blob/master/packager/README.md 포장 하 다.
매번 포장 할 때마다 플러그 인 은 설정 에 따라 포장 여 부 를 결정 하고 포장 자원 을 어떻게 설정 할 지 결정 합 니 다.
Demo
여 기 는 데모 입 니 다.https://github.com/liaohuqiu/ReactNativeTestGradlePlugin。
Demo 는 build. gradle 의 설정 을 보 여 줍 니 다. Android Stuido 로 열 면 실 행 됩 니 다. Dev Setting 의 Debug Server 를 수정 하지 마 십시오. 자원 이 포장 되 어 있 기 때문에 Debug Server 에서 다운로드 하지 않 습 니 다.debug. apk 를 풀 고 assets 디 렉 터 리 에 있 는 파일 을 볼 수 있 습 니 다.
로 컬 Maven 라 이브 러 리 에 react - native - gradle 를 컴 파일 하여 설치 한 스 크 립 트 가 포함 되 어 있 습 니 다. 실행 하면 됩 니 다.
react - native bundle 명령 안내
명령 사용 방법 은 다음 과 같 습 니 다.
mac-2:AwesomeProject srain$ react-native bundle –help Usage: react-native bundle [options]
options: – dev sets DEV flag to true, 같은 플러그 인 설정 dev – minify minify js bundle, 같은 플러그 인 설정 minify – root add another root (s) to be used in bundling in this project – assetRoots specify the root directories of app assets – out specify the output file, 출력 파일 의 위치 – url specify the bundle file url,js bundle 경로 가 iOS 를 포장 할 때:
react - native bundle – minify 본 고 는 로스앤젤레스 에서 샌프란시스코 까지 의 grey hound 버스 에 적 혀 있다.시간 이 촉박 하고 수준 이 제한 되 어 있 습 니 다. 오류 가 있 으 면 바로 잡 으 십시오. 원본 문 서 는 여기에 있 습 니 다.