注：本文是我在開發過程中遇到問題解決方法的總結，之後會持續更新，希望幫助到更多的學習者。文中有不妥的地方希望指出共同學習，同時歡迎大神補充。（之後我會放出自己開發整理的筆記和demo）歡迎持續喜歡關注 star。

錯誤1：

Paste_Image.png

估計是程式中有格式錯誤請自行檢查比如：你註釋出來問題。
{/*title="張三"*/}換
//title="張三"

錯誤2：

Paste_Image.png

這個說明你要跳轉的頁面缺少子控制元件。所以你要在裡面新增東西比如加個：<View></View>

警告3：除錯警告

Paste_Image.png

看下報的警告就知道除錯程式在這個視窗導致執行緩慢，所以建議你換一個單獨新的視窗進行除錯

警告4：

Paste_Image.png
Paste_Image.png

加上：

 <key>NSAppTransportSecurity</key>
 <dict>
  <key>NSAllowsArbitraryLoads</key>
  <true/>
 </dict>

錯誤4：

Paste_Image.png

這個很神奇。遇到了不要緊張多按 ⌘R幾下或者把模擬器上的專案刪除之後重新載入一般就會解決

錯誤5：

Paste_Image.png

認真看下錯誤資訊，上面說你忘記返回值了 所以你的函式中少了一個return（）；

錯誤6:

如果你檢查程式碼確實沒有錯誤。還報這個錯，那就說明你的埠被佔用了。開啟終端，切換到專案目錄。執行react-native start
如果出現Packager can't listen on port 8081那說明埠被佔用了。
：根據命令列提示進行操作：
1.lsof -n -i4TCP:8081 列出被佔用的埠列表
2.kill -9 <PID> 找到與之對應的PID然後刪除即可

錯誤7：

SyntaxError: SyntaxError /Users/zhaopengsong/Desktop/ReactNative/BuyDemo/Component/Main/ZPMain.js:
 
 JSX value should be either an expression or a quoted JSX text (107:22)

Paste_Image.png

語法錯誤，JSX語法必須用{}對變數進行賦值：如title=titleName換為title={titleName}
或者檢查下有沒有其他的語法錯誤，比如少了逗號多了分號這些低階錯誤

錯誤8

Requiring unknown module "undefined".If you are sure the module is there, try restarting the packager or running "npm install"

Paste_Image.png

這個錯誤我的解決思路是：之前改過什麼，撤回，一般是用到了錯誤的react-native 方法導致的。

錯誤9：

Paste_Image.png

原因：沒有啟動後臺react-Native 服務。即終端

Paste_Image.png

錯誤10：

如果你遇到了列如九宮格不自動換行的情況，檢查一下樣式裡面有沒有這兩句話flex-start：交叉軸的起點對齊。``wrap：換行，第一行在上方。

Paste_Image.png

錯誤11：

ExceptionsManager.js:63 Expected a component class, got [object Object]

Paste_Image.png

解決方法：
You need to rename your commonViewclass to CommonView, the class must becapitalize

錯誤12：

NSURLErrorDomain

這是你請求的URL錯誤。要是https:// 的才行。

錯誤13：建立新專案，react-native init 專案名命令長時間無響應，或報錯shasum check failed

react-native命令列從npm官方源拖程式碼時會遇上麻煩。請將npm倉庫源替換為國內映象：

npm config set registry https://registry.npm.taobao.org --global 
npm config set disturl https://npm.taobao.org/dist --global

另，執行init時切記不要在前面加上sudo

錯誤14：修改8081預設埠號的兩種方式

（1）啟動專案時react-native start --port 8083
（2）手動修改專案下的node_modules\react-native\local-cli\server\server.js下的方法server.js檔案，如下圖所示。

Paste_Image.png

錯誤15：

Application NewsDemo has not been registered. 
This is either due to a require() error during initialization 
or 
failure to call AppRegistry.registerComponent.

Paste_Image.png

錯誤原因是埠衝突。解決方法是看錯誤14
其次解決方法是：

1、終端
2、cd 到專案目錄
3、react-native start
4、lsof -n -i4TCP:8081 //這句可以看打印出8081埠下的服務
5、kill -9 <PID>    //終止你其他佔用埠

如圖：

Paste_Image.png

錯誤16：

如果你遇到了這個問題，並解決了。希望能在下面留言幫助更多的人。感謝！(我的錯誤原因是require路徑出錯，我是換用URI 載入image資源解決的)

錯誤17：

錯誤出現執行react-native run-ios出現下面錯誤

Failed to install the requested application
An application bundle was not found at the provided path.
Provide a valid path to the desired application bundle.
Print: Entry, ":CFBundleIdentifier", Does Not Exist

Command failed: /usr/libexec/PlistBuddy -c Print:CFBundleIdentifier build/Build/Products/Debug-iphonesimulator/ReactNativexx.app/Info.plist
Print: Entry, ":CFBundleIdentifier", Does Not Exist

Paste_Image.png

解決方法:
1、新建專案指定版本：
用--version引數建立指定版本的專案。例如react-native init DemoApp --version 0.44.3注意版本號必須精確到兩個小數點。
專案建立好之後：執行：react-native run-ios

2、嘗試reset一下 模擬器之後再react-native run-ios

Paste_Image.png

3、嘗試執行react-native upgrade 然後一路enter
再react-native run-ios試試？
解決方法參考連結：連線1,連線2

3、在這裡感謝:LeeyaWang 提供自己的解決思路：希望對之後遇到此問題的同學有所幫助！

步驟是：
1、首先刪除node_modules
2、修改package.json中react-native的版本為0.44.3 react為16.0.0-alpha.6
3、react-native run-ios 就可以啦 後來是出現我發你的問題 我覺得 應該是我這邊vpn的問題，所以我重啟了一下電腦 然後重置了模擬器 就可以了

友情提示： 如果你用的ReactNative版本為0.45.1，新建專案之後執行出現這個錯誤：
'boost/iterator/iterator_adaptor.hpp' file not found

'boost/iterator/iterator_adaptor.hpp' file not found

錯誤原因： 0.45需要下載boost編譯，因為被牆了所以會無法執行。
解決方法：
方法1、
第一步：將專案中的package.json檔案修改為這樣：

image.png

第二步：修改完成之後刪除node_modules資料夾在終端run:npm install
第三步：執行：react-native run-ios

方法2、新建專案指定版本：
用--version引數建立指定版本的專案。例如react-native init DemoApp --version 0.44.3注意版本號必須精確到兩個小數點。
專案建立好之後：執行：react-native run-ios

錯誤18：

Paste_Image.png

解決：

var View = React.View;

/* later... */
propTypes: {
    ...View.propTypes,
    myProp: PropTypes.string
}

錯誤19：(這個錯誤我的解決方法是新建專案，把元件放到新專案，重新安裝第三方，然後run,雖然笨了點，但是問題解決了。)

Paste_Image.png

嘗試解決：1、react-native link ||rnpm link一下然後再安裝
react-native run-ios遇到：

Paste_Image.png

錯誤20：

Application textDemo has not been registered. This is either due to a require() error during initialization or failure to call AppRegistry.registerComponent.

14C430A5-CA91-4731-89E0-55318AB9AACF.png

解決方案：
1、是註冊的時候寫錯了。也就是這段話註冊的不對：
AppRegistry.registerComponent('textDemo', () => textDemo);
注意：‘textDemo’這個是專案名 textDemo這個你可以隨自己你喜好指定。

2、很有可能是8081埠被佔用了
你可以嘗試：切換到專案所在目錄，輸入react-native start如果出現Packager can't listen on port 8081那說明埠被佔用了。
根據命令列提示進行操作：
1.lsof -n -i4TCP:8081 列出被佔用的埠列表
2.kill -9 <PID> 找到與之對應的PID然後刪除即可
3.重新執行專案 react-native run-ios/android

錯誤21 ：

如果你專案中頻繁遇到：
'RCTRootView.h'file not found.
RCTBridgeModule.h file not found

Paste_Image.png

解決方法：
1、新增link ：$(SRCROOT)/../node_modules/react-native/React

Paste_Image.png

2、到專案目錄下sudo npm install試試。
3、

#import "RCTBridgeModule.h"
換為

#import <React/RCTBridgeModule.h>

警告22⚠️：

安裝的過程中可能會遇到UNMET PEER DEPENDENCY的錯誤

Paste_Image.png

解決辦法就是在安裝的時候 指定具體的版本安裝：sudo npm install -g [email protected]~15.4.1
這個警告：
npm WARN [email protected] requires a peer of [email protected] but none was installed.

Paste_Image.png

解決：
npm install –save [email protected]

警告23⚠️：遮蔽OS_ACTIVITY_MODE.log

react-native 執行應用xcode列印log__nw_connection_get_connected_socket_block_invoke Connection has no connected handler
解決方法：

1. Xcode menu -> Product -> Edit Scheme...
2. Environment Variables -> Add -> Name: "OS_ACTIVITY_MODE", Value:"disable"
3. Run your app again, done! 這樣就沒問題了

圖示：

Paste_Image.png
Paste_Image.png
Paste_Image.png
Paste_Image.png

錯誤24：

Unable to resolve module `react/lib/ReactComponentWithPureRenderMixin` from
`/Users/song/Desktop/ReactNativeRouterFlux/node_module
s/react-native-experimental-navigation/node_modules/react-addons-pure-render-mixin/index.js`:
 Module does not exist in the module map or in these directories:

Paste_Image.png
Paste_Image.png

解決：
類似這種錯誤，就是缺少模組，通過npm i react-addons-pure-render-mixin -S 命令即可，標記部分是你缺少的模組名。
如果這樣解決不了問題，那你需要降低的的RN版本。可能版本過新了。
1、檢視你的版本：react-native --version
2、安裝適當的版本：npm install --save [email protected]
3、更新一下模板：react-native upgrade

錯誤25

RCTSRWebSocket.m報錯
Ignoring return value of function declared with warn_unused_result attribute

這個報錯在此檔案中有兩處，程式碼
SecRandomCopyBytes(kSecRandomDefault, sizeof(uint32_t), (uint8_t *)mask_key);
修改為
(void)SecRandomCopyBytes(kSecRandomDefault, sizeof(uint32_t), (uint8_t *)mask_key);
前面加上(void)。

RCTScrollView.m 報錯
Use of undeclared identifier '_refreshControl'; did you mean 'refreshControl'?

解決：

@implementation RCTCustomScrollView
{
  __weak UIView *_dockedHeaderView;
  RCTRefreshControl *_refreshControl;  // 加入此行
}

警告26⚠️：

[ReactJS Warning: Each child in an array or iterator should have a unique “key” prop]

image.png

遇到這個警告說明你的多個檢視陣列需要給個KEY標示！
可以給每個控制元件加上Key這樣寫:

<Text  key={0} style={{ position:'absolute', width:imgwidth,height:imgheight,top:64+Y,left:X,fontSize:parseInt(layoutData.fontsize)}}>{texts}</Text>

錯誤 27：Warning: Failed prop type: Invalid prop source supplied toRCTImageView OR

ExceptionsManager.js:71 Warning: Failed prop type: Invalid prop source supplied toImage.

image.png

解決：這個錯誤的原因是你給Image 的Source 有問題 比如不是一個URI ，檢視一下不是不傳入了一個物件像這樣。

image.png

錯誤28：

boost/iterator/iterator_adaptor.hpp' file not found