react-native ("옴니바" 및 WebView )로 구축된 모바일 웹 브라우저의 대략 적인 스케치입니다. 브라우저는 (현재 지원되지 않는) 분산 프로토콜( 현재 DAT )에 대한 전송 역할을 하는 게이트웨이 API(결국 GitHub에도 게시할 수 있음)와 인터페이스합니다.
const express = require ( 'express' )
const app = express ( )
const port = 3000
const host = 'localhost'
const startUpMsg = `proxy listening on port ${ port } !`
const serveIndex = require ( 'serve-index' )
const Dat = require ( 'dat-node' )
const path = require ( 'path' )
app . use ( express . static ( __dirname + '/dats' ) )
app . use ( '/' , serveIndex ( __dirname + '/dats' ) )
app . use ( function ( req , res , next ) {
const orig = req . url
const { referer , host } = req . headers
if ( referer && / ^(/) / . test ( req . url ) ) {
// account for relative asset paths
const folder = referer . replace ( `http:// ${ host } /` , '' )
res . redirect ( `/ ${ folder . replace ( '/' , '' ) } ${ req . url } ` )
}
next ( )
} )
app . get ( '/dat/:key' , ( req , res ) => {
const { key } = req . params
Dat ( `./dats/ ${ key } ` , {
key : key
} , function ( err , dat ) {
if ( err ) throw err
dat . joinNetwork ( { } , _ => {
res . json ( {
url : `http:// ${ host } : ${ port } / ${ key } `
} )
} )
} )
} )
app . listen ( port , _ => console . log ( startUpMsg ) )이 프로젝트는 Create React Native App으로 부트스트랩되었습니다.
아래에서 일반적인 작업 수행에 대한 정보를 찾을 수 있습니다. 이 가이드의 최신 버전은 여기에서 확인할 수 있습니다.
create-react-native-app 의 전역 설치를 아주 드물게만 업데이트해야 하며, 이상적으로는 업데이트하지 않는 것이 좋습니다.
앱의 react-native-scripts 종속성을 업데이트하는 것은 package.json 에서 버전 번호를 높이고 프로젝트의 종속성을 다시 설치하는 것만큼 간단해야 합니다.
새 버전의 React Native로 업그레이드하려면 react-native , react 및 expo 패키지 버전을 업데이트하고 app.json 에서 올바른 sdkVersion 설정해야 합니다. 패키지 버전 호환성에 대한 최신 정보는 버전 관리 가이드를 참조하세요.
프로젝트가 초기화될 때 Yarn이 설치된 경우 Yarn을 통해 종속성이 설치되므로 Yarn을 사용하여 이러한 명령을 실행해야 할 수도 있습니다. 종속성 설치와 달리 명령 실행 구문은 이 글을 쓰는 시점의 Yarn과 NPM에서 동일합니다.
npm start개발 모드에서 앱을 실행합니다.
휴대폰의 Expo 앱에서 열어서 확인하세요. 파일에 대한 편집 내용을 저장하면 다시 로드되며 터미널에 빌드 오류와 로그가 표시됩니다.
때로는 React Native Packager의 캐시를 재설정하거나 지워야 할 수도 있습니다. 그렇게 하려면 시작 스크립트에 --reset-cache 플래그를 전달할 수 있습니다.
npm start --reset-cache
# or
yarn start --reset-cache
npm test테스트에서 Jest 테스트 실행기를 실행합니다.
npm run ios npm start 와 비슷하지만 Mac에 설치되어 있는 경우 iOS 시뮬레이터에서 앱을 열려고 시도합니다.
npm run android npm start 와 비슷하지만 연결된 Android 기기나 에뮬레이터에서 앱을 열려고 시도하기도 합니다. Android 빌드 도구를 설치해야 합니다(자세한 설정은 React Native 문서 참조). 또한 Genymotion을 Android 에뮬레이터로 설치하는 것이 좋습니다. 네이티브 빌드 환경 설정을 마친 후에는 React 네이티브 앱 생성에 사용할 수 있는 올바른 adb 사본을 만들기 위한 두 가지 옵션이 있습니다.
adb 사용Settings -> ADB 로 이동합니다. "사용자 정의 Android SDK 도구 사용"을 선택하고 Android SDK 디렉터리로 업데이트하세요. adb 사용/Applications/Genymotion.app/Contents/MacOS/tools/ 입니다.npm run eject그러면 Create React Native App의 빌드 스크립트에서 "꺼내기" 프로세스가 시작됩니다. 프로젝트를 어떻게 구축하고 싶은지에 대해 몇 가지 질문을 받게 됩니다.
경고: 꺼내기 실행은 영구적인 작업입니다(사용하는 버전 제어 시스템과는 별도로). 제거된 앱을 사용하려면 Xcode 및/또는 Android Studio 환경을 설정해야 합니다.
expo 키 아래에 구성 키를 포함하도록 app.json 편집할 수 있습니다.
앱의 표시 이름을 변경하려면 app.json 의 expo.name 키를 적절한 문자열로 설정하세요.
앱 아이콘을 설정하려면 app.json 의 expo.icon 키를 로컬 경로 또는 URL로 설정하세요. 투명도가 있는 512x512 png 파일을 사용하는 것이 좋습니다.
이 프로젝트는 테스트를 위해 jest를 사용하도록 설정되었습니다. 원하는 테스트 전략을 구성할 수 있지만 jest는 기본적으로 작동합니다. jest로 파일을 로드하려면 __tests__ 라는 디렉터리에 또는 .test 확장자를 사용하여 테스트 파일을 만듭니다. 예제 테스트는 템플릿 프로젝트를 참조하세요. Jest 문서도 React Native 테스트 튜토리얼과 마찬가지로 훌륭한 리소스입니다.
환경 변수를 사용하여 Create React Native App의 동작 중 일부를 구성할 수 있습니다.
프로젝트를 시작하면 프로젝트 URL에 대해 다음과 같은 내용이 표시됩니다.
exp://192.168.0.2:19000
해당 URL의 "매니페스트"는 Expo 앱에 앱의 JavaScript 번들을 검색하고 로드하는 방법을 알려주므로 exp://localhost:19000 과 같은 URL을 통해 앱에 로드하더라도 Expo 클라이언트 앱은 계속해서 다음을 시도합니다. 시작 스크립트가 제공하는 IP 주소에서 앱을 검색합니다.
어떤 경우에는 이것이 이상적이지 않습니다. 가상 머신 내에서 프로젝트를 실행해야 하고 기본적으로 인쇄되는 IP 주소가 아닌 다른 IP 주소를 통해 패키저에 액세스해야 하는 경우가 이에 해당할 수 있습니다. Create React Native App에서 감지한 IP 주소 또는 호스트 이름을 재정의하려면 REACT_NATIVE_PACKAGER_HOSTNAME 환경 변수를 통해 고유한 호스트 이름을 지정할 수 있습니다.
맥과 리눅스:
REACT_NATIVE_PACKAGER_HOSTNAME='my-custom-ip-address-or-hostname' npm start
윈도우:
set REACT_NATIVE_PACKAGER_HOSTNAME='my-custom-ip-address-or-hostname'
npm start
위의 예에서는 개발 서버가 exp://my-custom-ip-address-or-hostname:19000 수신하도록 합니다.
Create React Native App은 앱 설정 및 개발을 간단하고 간단하게 만들기 위해 많은 작업을 수행하지만 호스팅 서비스에 의존하지 않고 Apple의 App Store 또는 Google의 Play Store에 배포하기 위해 동일한 작업을 수행하는 것은 매우 어렵습니다.
Expo는 CRNA에서 만든 JS 전용 앱에 대한 무료 호스팅을 제공하므로 Expo 클라이언트 앱을 통해 앱을 공유할 수 있습니다. 이를 위해서는 Expo 계정 등록이 필요합니다.
exp 명령줄 도구를 설치하고 게시 명령을 실행합니다.
$ npm i -g exp
$ exp publish
네이티브 코드를 직접 빌드하지 않고도 배포용 IPA/APK를 얻으려는 경우 Expo의 독립형 빌드와 같은 서비스를 사용할 수도 있습니다.
앱을 직접 빌드하고 배포하려면 CRNA에서 꺼내고 Xcode 및 Android Studio를 사용해야 합니다.
이는 일반적으로 프로젝트에서 npm run eject 실행하는 것만큼 간단하며, 프로세스를 안내합니다. 반드시 react-native-cli 설치하고 React Native용 네이티브 코드 시작 가이드를 따르세요.
프로젝트 작업 중에 Expo API를 사용한 경우 일반 React Native 프로젝트로 내보내면 해당 API 호출의 작동이 중지됩니다. 해당 API를 계속 사용하려면 "React Native + ExpoKit"을 선택하면 됩니다. 그러면 계속해서 고유한 네이티브 코드를 빌드하고 Expo API를 계속 사용할 수 있습니다. 이 옵션에 대한 자세한 내용은 꺼내기 가이드를 참조하세요.
네트워크 시간 초과 또는 연결 거부로 인해 휴대폰에 앱을 로드할 수 없는 경우 가장 먼저 해야 할 일은 휴대폰과 컴퓨터가 동일한 네트워크에 있고 서로 연결할 수 있는지 확인하는 것입니다. Create React Native App은 포트 19000 및 19001에 대한 액세스가 필요하므로 네트워크 및 방화벽 설정이 이 두 포트 모두에서 장치에서 컴퓨터로의 액세스를 허용하는지 확인하십시오.
휴대폰에서 웹 브라우저를 열고 패키저 스크립트가 인쇄하는 URL을 열어서 exp:// 를 http:// 로 바꿔보세요. 예를 들어 터미널의 QR 코드 아래에 다음이 표시됩니다.
exp://192.168.0.1:19000
휴대폰에서 Safari 또는 Chrome을 열고 로드해 보세요.
http://192.168.0.1:19000
그리고
http://192.168.0.1:19001
이 방법이 작동하지만 여전히 QR 코드를 스캔하여 앱을 로드할 수 없는 경우 이러한 단계에 대한 세부정보와 수신했을 수 있는 기타 오류 메시지가 포함된 Create React Native App 리포지토리에서 문제를 열어주세요.
휴대폰의 웹 브라우저에 http URL을 로드할 수 없는 경우 휴대폰에서 테더링/모바일 핫스팟 기능을 사용하고(단, 데이터 사용량에 주의하세요) 컴퓨터를 해당 WiFi 네트워크에 연결한 다음 패키저를 다시 시작해 보세요. VPN을 사용하는 경우 VPN을 비활성화해야 할 수도 있습니다.
Mac을 사용하는 경우 npm run ios 시도할 때 사용자에게 가끔 표시되는 몇 가지 오류가 있습니다.
이러한 종류의 오류를 해결하기 위해 수행할 수 있는 몇 가지 단계가 있습니다.
Command Line Tools 메뉴 옵션이 설정되어 있는지 확인하세요. Homebrew에서 CLI 도구를 처음 설치할 때 이 옵션이 공백으로 남아 있는 경우가 있는데, 이로 인해 Apple 유틸리티가 시뮬레이터를 찾지 못할 수 있습니다. 그런 다음 npm/yarn run ios 다시 실행하세요.Reset Contents and Settings... 선택하세요. 완료되면 시뮬레이터를 종료하고 npm/yarn run ios 다시 실행하세요.QR 코드를 스캔할 수 없는 경우 휴대전화 카메라의 초점이 올바른지 확인하고 단말기의 두 색상 대비가 충분히 높은지 확인하세요. 예를 들어 WebStorm의 기본 테마는 Expo 앱에서 사용하는 시스템 바코드 스캐너로 터미널 QR 코드를 스캔할 수 있을 만큼 대비가 충분하지 않을 수 있습니다.
이로 인해 문제가 발생하는 경우 터미널의 색상 테마를 변경하여 대비를 높이거나 다른 터미널에서 Create React Native App을 실행해 볼 수 있습니다. Expo 앱의 검색창에 패키저 스크립트에 의해 인쇄된 URL을 수동으로 입력하여 수동으로 로드할 수도 있습니다.
