問題1：pod install的時候報錯“- Yoga (= 0.43.4.React) required by React/Core (0.43.4)”。如圖所示

原因： RN版本 >= 0.42.0，需要再Podfile文件中入下面這行

target '項目名' do

  # 'node_modules'目錄一般位于根目錄中
  # 但是如果你的結構不同，那你就要根據實際路徑修改下面的`:path`
  pod 'React', :path => '../node_modules/react-native', :subspecs => [
    'Core',
    'RCTText',
    'RCTNetwork',
    'RCTWebSocket', # 這個模塊是用于調試功能的
    # 在這里繼續添加你所需要的模塊
  ]
  # 如果你的RN版本 >= 0.42.0，請加入下面這行
  pod "Yoga", :path => "../node_modules/react-native/ReactCommon/yoga"
end

問題1.png

問題2：報錯"[!] No podspec found for React in ./node_modules/react-native" 。如圖所示

原因： path=>''../注意項目路徑/node_modules' 中路徑不對

target 'RN_iOS' do

 //文件路徑
 pod 'React', :path => ‘./reactNative/node_modules/react-native', :subspecs => [
   'Core',
   'RCTText',
   'RCTNetwork',
   'RCTWebSocket',
 ]

 //文件路徑
 pod "Yoga", :path => “./reactNative/node_modules/react-native/ReactCommon/yoga"

end

問題2.png

問題3：報錯“Could not connect to development server.” 如圖所示

原因：沒有啟動ReactNative的服務

• 打開終端 ---》 進入node_modules所在的文件夾根目錄 ---》輸入： react-native start ---》服務開啟后，在模擬器上command+r 刷新

• 注意：此處會出現如圖3-1的錯誤提示,在info.plist中加入Https的鍵值對即可

<key>NSAppTransportSecurity</key>
    <key>NSAppTransportSecurity</key>
    <dict>
        <key>NSAllowsArbitraryLoads</key>
        <true/>
        <key>NSExceptionDomains</key>
        <dict>
            <key>localhost</key>
            <dict>
                <key>NSTemporaryExceptionAllowsInsecureHTTPLoads</key>
                <true/>
            </dict>
        </dict>
    </dict>

問題3.png

問題3-1.png

問題4：unable to resolve module 'react-navigation' from ......

This might be related to https://github.com/facebook/react-native/issues/4968
To resolve try the following:

1. Clear watchman watches: watchman watch-del-all.
2. Delete the node_modules folder: rm -rf node_modules && npm install.
3. Reset packager cache: rm -fr $TMPDIR/react-* or npm start --reset-cache.

問題4.png

原因：不詳，請大神補充解惑

解決：在package.json加入下面這句話,然后從新nom install 和pod install

"react-navigation": "git+https://github.com/react-community/react-navigation.git#7edd9a7"

{
  "name": "HelloWorld",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "node node_modules/react-native/local-cli/cli.js start",
    "test": "jest"
  },
  "dependencies": {
    "react": "16.0.0-alpha.6",
    "react-native": "0.43.4",
    "react-navigation": "git+https://github.com/react-community/react-navigation.git#7edd9a7"
  },
  "devDependencies": {
    "babel-jest": "19.0.0",
    "babel-preset-react-native": "1.9.1",
    "eslint": "^3.19.0",
    "eslint-plugin-react": "^6.10.3",
    "jest": "19.0.2",
    "react-test-renderer": "16.0.0-alpha.6"
  },
  "jest": {
    "preset": "react-native"
  }
}

問題5：“Native module cannot be null.”

問題5.png

原因：Xcode項目導入的ReactNative的依賴少了

報錯前Podfile文件

target '項目名' do


  pod 'React', :path => ‘./reactNative/node_modules/react-native', :subspecs => [
    'Core',
    'RCTText',
    'RCTNetwork',
    'RCTWebSocket',
  ]
  pod "Yoga", :path => “./reactNative/node_modules/react-native/ReactCommon/yoga"

end

解決問題后的Podfile文件

target '項目名' do
    
    pod 'React', :path => ‘./ReactNative/node_modules/react-native', :subspecs => [
        'Core',
        'ART',
        'RCTActionSheet',
        'RCTAdSupport',
        'RCTGeolocation',
        'RCTImage',
        'RCTNetwork',
        'RCTPushNotification',
        'RCTSettings',
        'RCTText',
        'RCTVibration',
        'RCTWebSocket',
        'RCTLinkingIOS',
    ]
    
    pod "Yoga", :path => “./ReactNative/node_modules/react-native/ReactCommon/yoga"
    
end

問題7：Argument list too long: recursive header expansion failed at:/....../

• 原因：因為RN的文件項目路徑過于長，循環遍歷，遍歷不過來，然后就報錯提示了
• 解決：Xcode -->項目 --> Bulid Setting -->Search Paths --> User Header Search Paths

將$(PODS_ROOT) 改成 $(PODS_ROOT)/React/React就OK了

問題8：png: No such file or directory
Command /Applications/Xcode.app/Contents/Developer/usr/bin/copypng failed with exit code 2

• 原因：可能因為圖片已經被壓縮導致
• 解決：Xcode -->項目 --> Bulid Setting -->Compress Png Files 試著為NO

問題8.png

后記：接入完成效果圖(當然，js文件是前段同事寫的)

項目下載地址

接入完成效果圖.png

iOS加載時，遇到"Loading from pro-bundle....."顯示進度條...,將RCTDevLoadingView.m中的代碼屏蔽即可

RCT_EXPORT_METHOD(showMessage:(NSString *)message color:(UIColor *)color backgroundColor:(UIColor *)backgroundColor)
{
  if (!isEnabled) {
    return;
  }

//  dispatch_async(dispatch_get_main_queue(), ^{
//    self->_showDate = [NSDate date];
//    if (!self->_window && !RCTRunningInTestEnvironment()) {
//      CGFloat screenWidth = [UIScreen mainScreen].bounds.size.width;
//      self->_window = [[UIWindow alloc] initWithFrame:CGRectMake(0, 0, screenWidth, 22)];
//#if TARGET_OS_TV
//      self->_window.windowLevel = UIWindowLevelNormal + 1;
//#else
//      self->_window.windowLevel = UIWindowLevelStatusBar + 1;
//#endif
//      // set a root VC so rotation is supported
//      self->_window.rootViewController = [UIViewController new];
//
//      self->_label = [[UILabel alloc] initWithFrame:self->_window.bounds];
//      self->_label.font = [UIFont systemFontOfSize:12.0];
//      self->_label.textAlignment = NSTextAlignmentCenter;
//
//      [self->_window addSubview:self->_label];
//    }
//
//    self->_label.text = message;
//    self->_label.textColor = color;
//    self->_window.backgroundColor = backgroundColor;
//    self->_window.hidden = NO;
//  });
}