React Native具備跨平臺能力和熱更新的能力,面向組件開發(fā)(OC是面向?qū)ο箝_發(fā)).本次主要講解例如React Native實(shí)現(xiàn)一套代碼可以同時運(yùn)行在iOS和android項(xiàng)目中
官網(wǎng)
(一)安裝React Native、Android Studio,Genymotion遇到的各種問題:
-
問題1:安裝React Native遇到的問題
錯誤1.png- 解決辦法：使用sudo命令,以管理員的身份來安裝React Native
解決辦法.png
-
問題2:安裝Android Studio,提示沒有安裝Android Studio的SDK組件
安裝Android Studio遇到的錯誤.png - 解決辦法:(必須得配置android SDK)
https://segmentfault.com/q/1010000003600528/a-1020000003632262
http://www.cnblogs.com/yjmyzz/p/4219829.html
-
問題3:導(dǎo)入已經(jīng)存在的android項(xiàng)目一直卡在Building gradle project info不動。
Building gradle project info.png- 解決辦法
- 解決辦法
1.新建一個Android項(xiàng)目A(非常快)
2.找到這個新建項(xiàng)目A的gradle-wrapper.properties文件。路徑：項(xiàng)目名/gradle/wrapper/gradle-wrapper.properties
3.復(fù)制gradle-wrapper.properties文件中的distributionUrl這整行的內(nèi)容.
4.打開要導(dǎo)入項(xiàng)目B的gradle-wrapper.properties文件，把項(xiàng)目B中的distributionUrl這一行的內(nèi)容用步驟3的distributionUrl替換。
6.重啟Android Studio,導(dǎo)入項(xiàng)目B。
- 截圖演示
---
- 問題4:提示缺少sdk,缺少Tools，缺哪個安裝哪個就行，很簡單。
- 缺少sdk
- 缺少Tools
---
- 問題5:安卓模擬器Genymotion,點(diǎn)擊Add獲取不到虛擬設(shè)備列表
- 解決辦法:點(diǎn)擊Add之后，登錄Genymotion，然后如果沒有列表顯示，后退再Add，如此反復(fù)。
---
- 問題6：安卓模擬器Genymotion,提示VirtualBox cannot start the virtual device
- 解決辦法:關(guān)掉Genymotion和Virtual Box,然后先打開Virtual Box,再打開Genymotion即可
---
- 問題7:在Android Studio運(yùn)行android項(xiàng)目提示，殺死adb進(jìn)程
ADB not responding.If you'd like to retry,then please manually kill "adb" and click 'Restart'
- 解決辦法:終端輸入
adb kill-server
- [提供一個鏈接,如果上面的命令不提示錯誤,那么這這個鏈接就沒有看的必要](http://jingyan.baidu.com/article/59703552c0f8818fc1074041.html)
- [再提供一個鏈接](http://stackoverflow.com/questions/38214012/appium-adb-server-version-31-doesnt-match-this-client-36)
---
- 問題8:如何在Android Studio中添加Genymotion插件
- [鏈接](http://jingyan.baidu.com/article/1709ad809ca58d4634c4f0fe.html),這個鏈接和實(shí)際操作有些出入,不過大致完全相同，需要修改如下幾個步驟
- 步驟1:
- 步驟5優(yōu)化:Mac上如何找到安裝好的Genymotion路徑？
- Finder->Applications->Genymotion->然后選中Genymotion拖動到終端中獲取路徑->粘貼到Android Studio中
----
####(二)配置React Native的步驟:
- 1.安裝Homebrew
Homebrew是OS X的套件(包)管理器，我們可以通過它獲取并且安裝很多組件
ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
- 2.安裝Node.js
ode安裝成功后npm自動也就有了
[鏈接](https://pan.baidu.com/s/1eSLUsJw)
- 3.安裝WatchMan
該插件用于監(jiān)控bug文件和文件變化 ，并且可以觸發(fā)指定的操作
brew install watchman
- 4.安裝Flow
flow是一個 JavaScript 的靜態(tài)類型檢查器，建議安裝它，以方便找出代碼中可能存在的類型錯誤
brew install flow
- 5.安裝React Native
sudo npm install -g react-native-cli
- 6.安裝Xcode
- 7.安裝JDK
[鏈接](https://pan.baidu.com/s/1kVEY7qB)
- 8.安裝Android studio。先安裝jdk，再安裝Android Studio.app [鏈接](https://pan.baidu.com/s/1hsAuRMc) [密碼](ygpp)
9.安裝安卓模擬器：Genymotion
[鏈接](https://pan.baidu.com/s/1jIwJEWe)
10.安裝virtualBox.注意:virtualBox和Genymotion必須結(jié)合誰用,誰都離不開誰
[鏈接](https://pan.baidu.com/s/1o8tnJxo)
11.安裝Webstorm。目的：存放以及寫android和ios的代碼
android和ios項(xiàng)目中放一些配置文件即可，例如圖片等。而代碼是都是放在index.android.js 、index.ios.js文件中
[鏈接](https://pan.baidu.com/s/1kVyJ5Mf)
12.終端創(chuàng)建項(xiàng)目
react-native init 項(xiàng)目名稱
13.打開該項(xiàng)目,用Xcode運(yùn)行該項(xiàng)目中的iOS項(xiàng)目
14.打開該項(xiàng)目,用Android Studio運(yùn)行該項(xiàng)目中的android項(xiàng)目
---
####(三)React Native項(xiàng)目遇到的問題
---
- Application xxx has not benn registered
- 錯誤原因：未關(guān)閉上一個項(xiàng)目的服務(wù)器，關(guān)掉即可.
- 解決辦法：
---
- 2.Main.js文件的第23行的第13個字符有錯誤
---
- 3.[親測可行]
Unable to resolve module react-timer-mixin from xxxxxx
- 解決辦法:工程目錄下執(zhí)行：
npm i react-timer-mixin --save
---
- 4.圖片不顯示
- 解決辦法:
---
- 5.青花瓷抓取的網(wǎng)絡(luò)的數(shù)據(jù)，每個一段時間就會無法使用,所以本項(xiàng)目中的鏈接隔一段時間就會失效,那么當(dāng)我們想要抓取數(shù)據(jù)時,要抓取到哪個數(shù)據(jù)呢
- 解決辦法:
---
- 6.
JSON value '<null>' of type NSNull cannot be converted to NSString
- 解決辦法
---
####(四)網(wǎng)易新聞案例[LS]( https://pan.baidu.com/s/1qYozS2C 密碼 qu46)
---
####步驟:
- 1. 終端輸入
cd /Users/zhangbin/Desktop/CoderZb
- 2. 終端輸入
react-native init NetNews
- 3.打開WebStorm，加載NetNews項(xiàng)目文件
- 4.點(diǎn)擊屏幕左側(cè)的Progect,右擊ios,選中Reveal in Finder,從而打開Xcode項(xiàng)目
- 5.打開xcode項(xiàng)目,并將預(yù)先準(zhǔn)備好的素材導(dǎo)入到Xcode項(xiàng)目
6.在WebStorm中劃分文件區(qū)域.目的:使項(xiàng)目邏輯更清晰.
7.在這些文件中寫上代碼
8.展示效果
---
####(五)電商案例[LS](https://pan.baidu.com/s/1i52RuyL 密碼 qgm3)
---
#####注意點(diǎn):
- 1.android圖片資源要放在指定目錄中
- 2.在Info.plist文件中可以修改app的名字
- 3.安裝第三方類庫
cd /Users/zhangbin/Desktop/CoderZb/XSSP
npm i react-native-tab-navigator --save
---
#####效果展示
- 運(yùn)行iOS模擬器，將項(xiàng)目運(yùn)行在iOS中
- 運(yùn)行android模擬器，將項(xiàng)目運(yùn)行在android中
- 特別提示:運(yùn)行android項(xiàng)目所做的準(zhǔn)備工作及其繁瑣,所以遇到的問題不計(jì)其數(shù),索性都最終都一一解決了。
---
####(六)React Native常用快捷鍵
選中代碼,代碼左移:Shift+Tab
選中代碼,代碼右移:Tab
