React Native 環境搭建踩坑


React Native (web Android)環境搭建踩坑(真的是一個艱辛的過程,大概所有坑都被我踩了

官方文檔地址 : https://facebook.github.io/react-native/docs/getting-started

選擇  Building Projects with Native Code 

大家可以參照官方文檔一步一步來,下面是我遇到的一些問題總結

  查看一下node版本           node -v     

  ------- 進入安裝之前最好查一下JDK版本       java -version     (如果沒有自己百度,配一下環境變量,這個也算是個超級大坑  o_o ....)

  中間自行安裝  Android Studio 

  也可以參考我新寫的掘金文章去安裝,嘻嘻

  https://juejin.im/post/5e467f91e51d4526cb161357

  執行 React Native 指令       npm install -g react-native-cli      

  裝好了之后 創建項目       react-native init    文件名   

  

  出現圖上之后項目就已經配置好了  //Android Studio 按照官網的配置就行了,

  ---------------     Android Studio 打開項目下的 android 文件夾 USB鏈接手機 

  ---------------   編輯器跟Android Studio 都要打開要運行的項目 ,否則可能會出現端口占用,404 

  下面進入到文件夾     cd 文件名   

  執行代碼        react-native run-android   

  鏈接手機,就如官網上所說的,沒有問題的朋友就已經運行出來項目了  

  --------------- 出現紅屏的朋友不要着急,那不是報錯,晃一晃手機 出現一個就會菜單 選擇  Dev Settings ===> Debug server host & Port for device   輸入電腦IP   ---------------

  或者,按照官網的方法在命令行執行      adb -s <device 端口號> reverse tcp:8081 tcp:8081 

  如果  adb 報錯 在環境變量    配置  path    里面新建添加     D://路徑 Android\Sdk\platform-tools  

  一切正常之后再搖一搖手機  選擇第一個      Reload   

  

 

  下面是我踩坑的時候遇到的問題

  > Configure project :app
  WARNING: Configuration 'compile' is obsolete and has been replaced with 'implementation' and 'api'.

  

 

  出現這個問題是  Android Studio  依賴配置  打開 Android Studio   , app ===> build.gradle     找到下面框的這個 全部替換為          implementation     

 

  

 

    如果 gradle 版本過高或者為下載成功得 打開  Android Studio  如圖配置   配置完命令行執行      react-native run-android    

 

  

 

 

   如果 出現    Could not connect to development server      的報錯  在命令行    npm start     

  

---------------------------------------------------------------------------------------------------------------------------------->分割線

出現這個錯誤 error: bundling failed: Error: Unable to resolve module `路徑`: Module `AccessibilityInfo` does not exist in the Haste module map        

 就按照提示在命令行輸出就行了

  npm watchman watch-del-all            

  npm rm -rf node_modules && npm install       

  npm rm -rf /tmp/metro-bundler-cache-*       

  npm start -- --reset-cache                     

  npm rm -rf /tmp/haste-map-react-native-packager-*           每一條都執行一下             

 

先總結到這里吧,總體來說 非常多的坑 ,希望大家在開發過程中順利

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM