這是一個具有Redux&Local Auth&React Navigation內置的Create-React-React-native-App樣板。
create-react-native-app-redux-auth生成了一個新的React Antival應用程序的所有基礎文件,其中Redux插入了(用於狀態管理)以及React Navigation和React Navigation和本地身份驗證!
您可以使用React Native中的所有組件和API,以及Expo應用程序提供的大多數JavaScript API。
create-react-native-app-redux-auth !可以在這裡找到完整的書面教程。
該項目用Create React Native App和FSG進行了引導。



確保您已安裝了節點V6,以及移動設備上的Expo Client 2.5.0的當前版本,以支持React Native 0.55。不需要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!生成文件後,請確保在項目root中運行以下命令( generated/除非您使用如上所述的路徑參數):
$ npm install快速啟動,只需更改2件事:
package.json中。 json,將“名稱”更改為應用程序的名稱。IP.js中,將IP更改為後端的完整IP地址,無論是在localhost:PORT還是部署的某個地方,例如Heroku。為了啟用內置的本地身份驗證,生成的項目假定運行數據庫。您必須將服務器配置為Redux的Axios調用:
${IP}/auth/login {電子郵件:電子郵件,密碼:passwass}的請求。${IP}/auth/signup提出發布請求。${IP}/auth/logout提出刪除請求。 $ npm start感謝您的演奏!哈語。 ?
下面您會找到有關執行常見任務的信息。本指南的最新版本可在此處找到。
您只需要非常少有地更新create-react-native-app的全局安裝,理想情況下從未更新。
更新應用程序的react-native-scripts依賴性應該就像撞到package.json中的版本編號一樣簡單。
升級到新版本的React Native需要更新react-native , react和expo軟件包版本,並在app.json中設置正確的sdkVersion 。有關軟件包版本兼容性的最新信息,請參見版本指南。
如果在初始化項目時安裝了紗線,則將通過紗線安裝依賴項,並且您可能還應使用它來運行這些命令。與依賴性安裝不同,在撰寫本文時,命令運行語法對於YARN和NPM相同。
npm start在開發模式下運行您的應用程序。
在手機上的Expo應用程序中打開它以查看。如果將編輯保存到文件中,它將重新加載,您將在終端中看到構建錯誤和日誌。
有時,您可能需要重置或清除React Native Packager的緩存。為此,您可以將--reset-cache標誌傳遞給開始腳本:
npm start --reset-cache
# or
yarn start --reset-cache
npm test在您的測試中運行嘲笑測試跑者。
npm run ios就像npm start一樣,如果您在Mac上並安裝了它,也嘗試在iOS模擬器中打開您的應用程序。
npm run android就像npm start一樣,但也嘗試在連接的Android設備或模擬器上打開您的應用程序。需要安裝Android構建工具(有關詳細設置,請參見React Native Docs)。我們還建議將基因應作為您的Android仿真器。設置本機構建環境後,有兩種選擇可用於創建adb的正確副本來創建React Antive App:
adbSettings -> ADB 。選擇“使用自定義Android SDK工具”,然後使用您的Android SDK目錄進行更新。 adb/Applications/Genymotion.app/Contents/MacOS/tools/ 。npm run eject這將啟動從Create React Antive App的構建腳本中“彈出”的過程。您會詢問有關如何構建項目的幾個問題。
警告:運行彈出是一個永久的操作(除了您使用的任何版本控制系統之外)。彈出的應用程序將要求您建立XCode和/或Android Studio環境。
您可以編輯app.json以在expo密鑰下包含配置鍵。
要更改應用程序的顯示名稱,請在app.json中設置expo.name鍵為適當的字符串。
要設置應用程序圖標,請在app.json中設置expo.icon鍵為本地路徑或URL。建議您使用具有透明度的512x512 PNG文件。
該項目設置為使用開玩笑進行測試。您可以配置自己喜歡的任何測試策略,但是開west可以解決。在稱為__tests__的目錄中創建測試文件,或使用.test擴展名為Jest加載的文件。有關示例測試,請參見“模板”項目。開玩笑的文檔也是一個很棒的資源,React Native Testing教程也是如此。
您可以使用環境變量來配置某些Create React Antive App的行為。
啟動項目時,您會為您的項目URL看到類似的東西:
exp://192.168.0.2:19000
該URL上的“清單”告訴Expo應用如何檢索和加載應用程序的JavaScript捆綁包,因此,即使您通過exp://localhost:19000這樣的URL將其加載到應用程序中,Expo Client App仍然會嘗試在IP地址上試圖在IP地址中檢索您的應用程序。
在某些情況下,這不是理想的。如果您需要在虛擬機內運行項目,並且必須通過與默認情況下打印的IP地址訪問包裝器,則可能是這種情況。為了覆蓋由Create React Antive App檢測到的IP地址或主機名,您可以通過REACT_NATIVE_PACKAGER_HOSTNAME Environment varrible指定自己的主機名:
MAC和Linux:
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商店時,很難做到這一點。
Expo為CRNA創建的僅JS的應用程序提供免費託管,使您可以通過Expo Client應用程序共享應用程序。這需要註冊世博帳戶。
安裝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 Antions + Expokit”,這仍然可以允許您構建自己的本機代碼並繼續使用Expo API。有關此選項的更多詳細信息,請參見彈出指南。
如果您由於網絡超時或拒絕連接而無法將應用程序加載到手機上,那麼第一步是驗證您的手機和計算機是否在同一網絡上,並且可以互相聯繫。 Create React Antive App需要訪問端口19000和19001,因此請確保您的網絡和防火牆設置允許在這兩個端口上從設備訪問計算機。
嘗試在手機上打開Web瀏覽器,並打開Packager腳本打印的URL,用http:// exp:// //。因此,例如,如果在終端中的QR碼下方,則可以看到:
exp://192.168.0.1:19000
嘗試在手機上打開Safari或Chrome並加載
http://192.168.0.1:19000
和
http://192.168.0.1:19001
如果這有效,但是您仍然無法通過掃描QR碼來加載應用程序,請在Create React React Angie App存儲庫上打開一個問題,其中包含有關這些步驟以及您可能收到的任何其他錯誤消息的詳細信息。
如果您無法將http URL加載到手機的Web瀏覽器中,請嘗試使用手機上的Tethering/Mobile Hotspot功能(雖然要當心數據使用情況),將計算機連接到該WiFi網絡,然後重新啟動包裝器。如果您使用的是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 App使用的系統條形碼掃描儀一起掃描終端QR碼。
如果這會給您帶來問題,則可能需要嘗試更改終端的顏色主題以具有更多的對比度,或者運行從其他終端創建React Antive應用程序。您還可以在Expo應用程序的搜索欄中手動輸入Packager腳本打印的URL以手動加載它。