create react native app redux auth
1.0.0
이것은 Redux & Local Auth & React Navigation이 내장 된 Create-React-Native-App Boilerplate입니다.
create-react-native-app-redux-auth Create Redux가 연결된 새로운 React Native 앱 (상태 관리)과 React Navigation 및 Local Authentication이 완전히 완료된 모든 기본 파일을 생성합니다!
엑스포 앱이 제공하는 대부분의 JavaScript API뿐만 아니라 React Native의 모든 구성 요소 및 API와 함께 작업 할 수 있습니다.
create-react-native-app-redux-auth 에 오신 것을 환영합니다!전체 서면 자습서는 여기에서 찾을 수 있습니다.
이 프로젝트는 Create React Native App 및 FSG로 부트 스트랩되었습니다.
React Native 0.55를 지원하기 위해 모바일 장치의 현재 버전의 Expo Client 2.5.0뿐만 아니라 Node V6 이상 설치되어 있는지 확인하십시오. Xcode 또는 Android Studio 설치가 필요하지 않습니다.
$ npm install -g create-react-native-app-redux-auth create-react-native-app-redux-auth 명령 줄 도구는 몇 가지 다른 방식으로 사용할 수 있습니다.
$ create-react-native-app-redux-auth 디렉토리에서 create-react-native-app-redux-auth 실행하면 새 응용 프로그램 파일이 포함 generated 서브 폴더가 생성됩니다.
또는 create-react-native-app-redux-auth 파일 경로 (상대 또는 절대 및 아직 존재하지 않는 것도)를 가져갈 수 있으며 대상 폴더를 사용/작성하여 새 응용 프로그램 파일로 채우게됩니다.
$ create-react-native-app-redux-auth path/to/any/directory/you/prefer . 디렉토리로 만들어서 cd 를 작성하고 새 앱 파일로 채우려면 길.
$ create-react-native-app-redux-auth . # caution, this will put the new files in your current folder! 파일을 생성 한 후 다음 명령이 프로젝트 루트에서 실행되는지 확인하십시오 (위에서 설명한대로 경로 인수를 사용하지 않는 한 generated/ ).
$ npm install빠른 시작하려면 두 가지를 변경하십시오.
package.json 에서 "이름"을 앱 이름으로 변경하십시오.IP.js 에서는 Heroku와 같이 localhost:PORT 또는 Someplace 배포에 관계없이 IP를 백엔드의 전체 IP 주소로 변경하십시오.내장 된 로컬 인증을 가능하게하기 위해 생성 된 프로젝트는 실행중인 데이터베이스를 가정합니다. Redux의 Axios 호출에 대한 서버를 구성해야합니다.
${IP}/auth/login {이메일 : 이메일, 비밀번호 : 비밀번호}를 사용합니다.${IP}/auth/signup 에 게시 요청이됩니다.${IP}/auth/logout 에 삭제 요청을 만듭니다. $ npm start연주 해 주셔서 감사합니다! Hadoken. ?
아래에는 일반적인 작업 수행에 대한 정보가 있습니다. 이 안내서의 가장 최근 버전은 여기에서 제공됩니다.
create-react-native-app 의 전역 설치 만 업데이트하면 거의 거의 없었습니다.
앱의 react-native-scripts 종속성을 업데이트하는 것은 package.json 의 버전 번호를 충돌시키고 프로젝트의 종속성을 다시 설치하는 것만 큼 간단해야합니다.
새 버전의 React Native로 업그레이드하려면 react-native , react 및 expo 패키지 버전을 업데이트하고 app.json 에서 올바른 sdkVersion 설정해야합니다. 패키지 버전 호환성에 대한 최신 정보는 버전 관리 안내서를 참조하십시오.
프로젝트가 초기화되면 원사가 설치되면 원사를 통해 종속성이 설치 되며이 명령을 실행하는 데 사용해야합니다. 종속성 설치와 달리, 명령 실행 구문은이 글을 쓰는 시점에서 원사 및 NPM의 경우 동일합니다.
npm start개발 모드에서 앱을 실행합니다.
휴대 전화의 엑스포 앱에서 열어서 볼 수 있습니다. 파일에 편집을 저장하면 다시로드되며 터미널의 빌드 오류 및 로그인이 표시됩니다.
때로는 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 빌드 도구 설치가 필요합니다 (자세한 설정은 원시 문서를 참조하십시오). 또한 안드로이드 에뮬레이터로 유전자 입력을 설치하는 것이 좋습니다. 기본 빌드 환경 설정을 마친 후에는 adb 의 올바른 사본을 React Native 앱을 만들기위한 두 가지 옵션이 있습니다.
adb 사용Settings -> ADB 로 이동하십시오. “Custom Android SDK 도구 사용”을 선택하고 Android SDK 디렉토리로 업데이트하십시오. adb 사용/Applications/Genymotion.app/Contents/MacOS/tools/ 입니다.npm run eject이렇게하면 React Native App의 빌드 스크립트 작성에서 "배출"프로세스가 시작됩니다. 프로젝트를 어떻게 구축하고 싶은지에 대한 몇 가지 질문을받을 것입니다.
경고 : 실행은 영구적 인 조치입니다 (사용하는 버전 제어 시스템 외에는). 배출 된 앱은 Xcode 및/또는 Android Studio 환경을 설정해야합니다.
expo 키 아래에 구성 키를 포함하도록 app.json 편집 할 수 있습니다.
앱의 디스플레이 이름을 변경하려면 app.json 의 expo.name 키를 적절한 문자열로 설정하십시오.
앱 아이콘을 설정하려면 app.json 의 expo.icon 키를 로컬 경로 또는 URL로 설정하십시오. 투명성이있는 512x512 PNG 파일을 사용하는 것이 좋습니다.
이 프로젝트는 테스트에 농담을 사용하도록 설정되었습니다. 원하는 테스트 전략을 구성 할 수 있지만 Jest는 상자에서 작동합니다. __tests__ 라는 디렉토리에서 테스트 파일을 만듭니다 .test 예제 테스트는 템플릿 프로젝트를 참조하십시오. JEST 문서는 React Native Testing Tutorial과 마찬가지로 훌륭한 리소스입니다.
환경 변수를 사용하여 React Native App의 동작 생성을 구성 할 수 있습니다.
프로젝트를 시작할 때 프로젝트 URL에 대해 다음과 같은 것을 볼 수 있습니다.
exp://192.168.0.2:19000
해당 URL의 "Manifest"는 Expo 앱에 앱의 JavaScript 번들을 검색하고로드하는 방법을 알려줍니다. 따라서 exp://localhost:19000 과 같은 URL을 통해 앱에로드하는 경우에도 Expo 클라이언트 앱은 여전히 시작 스크립트가 제공하는 IP 주소에서 앱을 검색하려고합니다.
경우에 따라 이것은 이상적이지 않습니다. 가상 머신 내부에서 프로젝트를 실행 해야하는 경우에 해당 될 수 있으며 기본적으로 인쇄하는 것과 다른 IP 주소를 통해 패키지에 액세스해야합니다. React Native App 작성으로 감지 된 IP 주소 또는 호스트 이름을 무시하려면 REACT_NATIVE_PACKAGER_HOSTNAME 환경 변수를 통해 자신의 호스트 이름을 지정할 수 있습니다.
Mac 및 Linux :
REACT_NATIVE_PACKAGER_HOSTNAME='my-custom-ip-address-or-hostname' npm start
Windows :
set REACT_NATIVE_PACKAGER_HOSTNAME='my-custom-ip-address-or-hostname'
npm start
위의 예는 개발 서버가 exp://my-custom-ip-address-or-hostname:19000 에서 듣게합니다.
React Native App 만들기는 앱 설정 및 개발을 간단하고 간단하게 만들기 위해 많은 작업을 수행하지만 호스팅 서비스에 의존하지 않고 Apple의 App Store 또는 Google Play 스토어에 배포하는 데 동일하게 수행하는 것은 매우 어렵습니다.
Expo는 CRNA에서 만든 JS 전용 앱에 대한 무료 호스팅을 제공하므로 Expo 클라이언트 앱을 통해 앱을 공유 할 수 있습니다. 엑스포 계정에 등록해야합니다.
exp 명령 줄 도구를 설치하고 게시 명령을 실행하십시오.
$ npm i -g exp
$ exp publish
기본 코드를 직접 구축하지 않고 배포 할 IPA/APK를 얻으려면 Expo의 독립형 빌드와 같은 서비스를 사용할 수도 있습니다.
앱을 직접 구축하고 배포하려면 CRNA를 꺼내고 Xcode 및 Android Studio를 사용해야합니다.
이것은 일반적으로 프로젝트에서 npm run eject 실행하는 것만 큼 간단하므로 프로세스를 안내합니다. react-native-cli 를 설치하고 React Native의 기본 코드 Getting 시작 안내서를 따르십시오.
프로젝트 작업을하는 동안 Expo API를 사용한 경우 정기적 인 React Native 프로젝트를 꺼내면 API 통화가 작동을 중단합니다. 해당 API를 계속 사용하려면 "Native + Expokit"을 꺼내면 자신의 기본 코드를 구축하고 Expo API를 계속 사용할 수 있습니다. 이 옵션에 대한 자세한 내용은 꺼내기 안내서를 참조하십시오.
네트워크 타임 아웃 또는 거부 된 연결로 인해 휴대 전화에 앱을로드 할 수없는 경우 첫 번째 단계는 휴대 전화와 컴퓨터가 동일한 네트워크에 있고 서로 도달 할 수 있는지 확인하는 것입니다. React Native App 작성 Port 19000 및 19001에 대한 액세스가 필요하므로 네트워크 및 방화벽 설정 이이 두 포트의 장치에서 컴퓨터로 액세스 할 수 있는지 확인하십시오.
휴대 전화에서 웹 브라우저를 열고 Packager 스크립트가 인쇄 한 URL을 열어 exp:// http:// 로 대체하십시오. 예를 들어, 터미널의 QR 코드 아래에있는 경우 다음을 볼 수 있습니다.
exp://192.168.0.1:19000
휴대 전화에서 사파리 또는 크롬을 열고로드하십시오.
http://192.168.0.1:19000
그리고
http://192.168.0.1:19001
이 효과가 있지만 QR 코드를 스캔하여 여전히 앱을로드 할 수는 없으며 이러한 단계에 대한 세부 사항과받은 기타 오류 메시지가 포함 된 React Native App Repository Create에서 문제를 엽니 다.
휴대 전화 웹 브라우저에 http URL을로드 할 수없는 경우 휴대 전화의 테 더링/모바일 핫스팟 기능 (데이터 사용량을 조심하십시오)을 사용하여 컴퓨터를 해당 WiFi 네트워크에 연결하고 Packager를 다시 시작하십시오. 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 코드가 스캐닝 할 수있는 충분한 대비가 없을 수 있습니다.
이것이 문제를 일으키는 경우 터미널의 색상 테마를 변경하여 더 대비를 받거나 다른 터미널에서 React Native App을 생성하려고 시도 할 수 있습니다. 엑스포 앱의 검색 창에 Packager 스크립트로 인쇄 된 URL을 수동으로로드하여 수동으로로드 할 수도 있습니다.
