準備工作 要安裝很多東西
Python牺汤、Node.js、java jdk(下載1.8的)浩嫌、git檐迟、Android Studio、npm安裝码耐、雷電模擬器
Python下載后直接點擊安裝
下載地址:https://www.python.org/downloads/
Node.js下載后也直接安裝追迟,安裝成功后可打開cmd用node-v來測試是否安裝成功
下載地址https://nodejs.org/en/(下載LTS版本)
java jdk下載后記住位置配置環(huán)境變量,可參考這里
java jdk下載地址http://www.oracle.com/technetwork/java/javase/downloads/index.html
安裝npm,在安裝Node.js時候其實就已經安裝了npm每瞒。但是npm的版本比較低金闽,可參考這個文章安裝npm
百度下載雷電模擬器,安裝打開
android studio 下載地址http://developer.android.com/
下載后最后安裝Android studio 剿骨,并配置Android sdk的環(huán)境變量代芜。設置環(huán)境變量ANDROID_HOME:Android SDK Manager的位置 例如:(ANDROID_HOME=> E:\Android\sdk)設置環(huán)境變量PATH:例如:(PATH=> %ANDROID_HOME%\tools;%ANDROID_HOME%\platform-tools)
安裝成功后sdk,打開Android sdk manager浓利,或者新建一個文件點擊圖片紅色標記處的下載圖標挤庇,然后點擊Android sdk頁面
看看Android SDKolatform-tools的版本號是不是23的,要23的才行
把6.0下的這些打鉤贷掖,點擊apply完成下載和安裝嫡秕,要把右下角的勾上才能看到
到tools下,把圖中打鉤的下載并apply
下載安裝好后苹威,點擊運行按鈕昆咽,看看雷電模擬器是否已經識別到了,識別了就沒問題了牙甫。
打開命令窗口掷酗,搜索cmd,
在彈出的命令框當中輸入以下指令窟哺,回車
npm config set registry https://registry.npm.taobao.org --global
輸入完成后泻轰,回車,輸入下一條指令
npm config set disturl https://npm.taobao.org/dist --global
目的是在于將npm下載的地址轉為國內的地址且轨,加快下載速度
然后在命令行當中輸入如下指令用于安裝react native浮声,回車:
npm install -g react-native-cli,
輸入npm install -g
安裝好后就可以用react native的命令了
比如創(chuàng)建一個react-native項目殖告,在命令行中輸入如下指令阿蝶,回車:
react-native init MyProject
MyProject就是創(chuàng)建的項目,創(chuàng)建好后可以在目錄下找到它黄绩。創(chuàng)建過程要等好幾分鐘羡洁。
創(chuàng)建成功后的目錄結構如圖所示:里面有安卓項目,以后可使用Android studio 打開Android 目錄.
如果重新打開虛擬機后爽丹,需要使用cd進入當前需操作的文件夾
在命令行中進入項目目錄筑煮,輸入react-native start,等待一段時間粤蝎,
這時候可以用瀏覽器訪問http://localhost:8081/index.android.bundle?platform=android真仲,出現(xiàn)很長的js文件就表示服務端 可以了。
進入項目目錄初澎,輸入react-native run-android (記得在輸入此命令前秸应,要先打開模擬器) 虑凛,這表示運行安卓端。等待一段時間软啼,運行成功
http://localhost:8081/debugger-ui/可進入鏈接看
但是有很多小伙伴運行的時候報錯桑谍,運行不成功。
如圖所示:
錯誤一
錯誤原因:
這個提示Android SDK沒有找到祸挪,可以通過local.properties配置sdk.dir锣披,也可以設置設置ANDROID_HOME環(huán)境bi變量來設置SDK位置;
方案一:
在react-native創(chuàng)建的項目目錄下的Android目錄下新建一個local.properties文件贿条,
編輯內容:
sdk.dir = D:/ProgramFile/Android/androidsdk
方案二:
在環(huán)境變量中添加名ANDROID_HOME的變量,值為SDK路徑
"我的電腦"右鍵“屬性”->高級系統(tǒng)設置->環(huán)境變量 -> 新建ANDROID_HOME
如果在cmd里面輸入Android sdk 可查詢到則安裝成功雹仿,這時候重新輸入命令 react-native run-android 運行
錯誤二
如果你遇到了ERROR Watcher took too long to load的報錯,請嘗試修改node_modules/react-native/packager/react-packager/src/FileWatcher/index.js整以,將其中的MAX_WAIT_TIME 從25000改為更大的值(單位是毫秒)
不過一般情況下都是上訴的環(huán)境未配置正確胧辽,可再次檢查一遍。