用AndroidStudio和vsCode運行ReactNative項目

筆記

react-native學習筆記

安裝依賴
必須安裝的依賴有:Node、Watchman、JDK 和 Android Studio。

雖然你可以使用任何編輯器來開發應用(編寫 js 代碼),但你仍然必須安裝 Android Studio 來獲得編譯 Android 應用所需的工具和環境。


1創建新項目
 npx react-native init AwesomeProject 

2編譯並運行 React Native 應用
cd AwesomeProject
yarn react-native run-android
yarn react-native run-android只是運行應用的方式之一。你也可以在 Android Studio 中直接運行應用

出現了這個錯誤 Installing DoubleConversion (1.1.6)離線安裝
重複執行 yarn react-native run-android 中間執行了下面幾個命令
$ cd node_modules/react-native/scripts && ./ios-install-third-party.sh && cd ../../../
$ cd node_modules/react-native/third-party/glog-0.3.5/ && ../../scripts/ios-configure-glog.sh && cd ../../../../


進入AwesomeProject文件夾開啓react-native 服務,不要關閉,重要,如果不開啓服務會出紅屏問題(Could not get VatchedBridge…)

3 androidstudio 打開AwesomeProject中的Android文件夾

4 下載依賴包 同步,注意sbt shell這個窗口,在不斷的下載依賴包

5 運行Android項目

VSCode 運行AwesomeProject 項目

1 需要安裝React Native Tools插件
2 點擊 create a launch.json file. 在選擇環境時選中 'React Native' 

3 在界面上點擊 Add Configuration  
"configurations": [
        
        {
            "type": "android",
            "request": "launch",
            "name": "Launch App",
            "appSrcRoot": "${workspaceRoot}/app/src/main",
            "apkFile": "${workspaceRoot}/app/build/outputs/apk/debug/app-debug.apk",
            "adbPort": 5037
        },


4 修改配置項目 默認項目沒有android 
 "appSrcRoot": "${workspaceRoot}/android/app/src/main",
  "apkFile": "${workspaceRoot}/android/app/build/outputs/apk/debug/app-debug.apk",

5 Launch/Debug App  選擇Launch App  






開發工具
VS Code是目前非常受 JS 開發者歡迎的 IDE 工具。

Ignite是一套整合了 Redux 以及一些常見 UI 組件的腳手架。它帶有一個命令行可以生成 app、組件或是容器。如果你喜歡它的選擇搭配,那麼不妨一試。

App Center是由微軟提供的熱更新服務。熱更新可以使你繞過 AppStore 的審覈機制,直接修改已經上架的應用。對於國內用戶,我們也推薦由本網站提供的Pushy熱更新服務,相比 CodePush 來說,提供了全中文的文檔和技術支持,服務器部署在國內速度更快,還提供了全自動的差量更新方式,大幅節約更新流量,歡迎朋友們試用和反饋意見!

Expo是一套沙盒開發環境,還帶有一個已上架的空應用容器。這樣你可以在沒有原生開發平臺(Xcode 或是 Android Studio)的情況下直接編寫 React Native 應用(當然這樣你只能寫 js 部分代碼而沒法寫原生代碼)。















發佈了283 篇原創文章 · 獲贊 84 · 訪問量 39萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章