問(wèn)題1：pod install的時(shí)候報(bào)錯(cuò)“- Yoga (= 0.43.4.React) required by React/Core (0.43.4)”。如圖所示

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

target '項(xiàng)目名' do

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

問(wèn)題1.png

問(wèn)題2：報(bào)錯(cuò)"[!] No podspec found for React in ./node_modules/react-native" 。如圖所示

原因： path=>''../注意項(xiàng)目路徑/node_modules' 中路徑不對(duì)

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

問(wèn)題2.png

問(wèn)題3：報(bào)錯(cuò)“Could not connect to development server.” 如圖所示

原因：沒(méi)有啟動(dòng)ReactNative的服務(wù)

• 打開(kāi)終端 ---》 進(jìn)入node_modules所在的文件夾根目錄 ---》輸入： react-native start ---》服務(wù)開(kāi)啟后，在模擬器上command+r 刷新

• 注意：此處會(huì)出現(xiàn)如圖3-1的錯(cuò)誤提示,在info.plist中加入Https的鍵值對(duì)即可

<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>

問(wèn)題3.png

問(wèn)題3-1.png

問(wèn)題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.

問(wèn)題4.png

原因：不詳，請(qǐng)大神補(bǔ)充解惑

解決：在package.json加入下面這句話(huà),然后從新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"
  }
}

問(wèn)題5：“Native module cannot be null.”

問(wèn)題5.png

原因：Xcode項(xiàng)目導(dǎo)入的ReactNative的依賴(lài)少了

報(bào)錯(cuò)前Podfile文件

target '項(xiàng)目名' 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

解決問(wèn)題后的Podfile文件

target '項(xiàng)目名' 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

問(wèn)題7：Argument list too long: recursive header expansion failed at:/....../

• 原因：因?yàn)镽N的文件項(xiàng)目路徑過(guò)于長(zhǎng)，循環(huán)遍歷，遍歷不過(guò)來(lái)，然后就報(bào)錯(cuò)提示了
• 解決：Xcode -->項(xiàng)目 --> Bulid Setting -->Search Paths --> User Header Search Paths

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

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

• 原因：可能因?yàn)閳D片已經(jīng)被壓縮導(dǎo)致
• 解決：Xcode -->項(xiàng)目 --> Bulid Setting -->Compress Png Files 試著為NO

問(wèn)題8.png

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

項(xiàng)目下載地址

接入完成效果圖.png

iOS加載時(shí)，遇到"Loading from pro-bundle....."顯示進(jìn)度條...,將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;
//  });
}