第一步、新建iOS項(xiàng)目（cocoapods）

第二步、在項(xiàng)目中建一個(gè)名為reactnative的文件夾, 用于存放我們r(jià)eact-native的相關(guān)文件, 再創(chuàng)建一個(gè)package.json文件, 用于初始化react-native的相關(guān)配置.(此處復(fù)制于另一個(gè)mobX項(xiàng)目)

{
  "name": "MobXTest",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "node node_modules/react-native/local-cli/cli.js start",
    "test": "jest"
  },
  "dependencies": {
    "babel-plugin-syntax-decorators": "^6.13.0",
    "babel-plugin-transform-decorators-legacy": "^1.3.5",
    "babel-preset-mobx": "^1.0.3",
    "babel-preset-stage-0": "^6.24.1",
    "mobx": "^5.1.0",
    "mobx-react": "^5.2.5",
    "react": "16.4.1",
    "react-native": "0.56.0"
  },
  "devDependencies": {
    "babel-jest": "23.4.2",
    "babel-preset-react-native": "^5",
    "jest": "23.5.0",
    "react-test-renderer": "16.4.1"
  },
  "jest": {
    "preset": "react-native"
  }
}

cd reactnative
yarn install

第三步、創(chuàng)建一個(gè)index.ios.js，為RN界面

/** @format */

import {AppRegistry, StyleSheet, Text, View, TextInput,TouchableOpacity} from 'react-native';

import React, {Component} from 'react';

class Root extends Component {
    render() {
        return (
            <Text>iOS項(xiàng)目中集成RN</Text>
        );
    }
}
AppRegistry.registerComponent('iOSInstallRN', () => Root);

第四步、添加ReactNative

reactnative 為之前建立的文件夾

platform :ios, '9.0'
use_frameworks!
target 'iOSInstallRN' do
pod 'AFNetworking'
pod 'MBProgressHUD'
pod 'React', :path => './reactnative/node_modules/react-native', :subspecs => [
  'Core',
  'DevSupport',
  'RCTText',
  'RCTNetwork',
  'RCTWebSocket',
  'RCTImage',
  'RCTGeolocation',
  'RCTSettings'
  ]
pod 'yoga', :path => './reactnative/node_modules/react-native/ReactCommon/yoga'
end

pod install

第五步、配置App Transport Security

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

?這種問題可能是ios支持的版本太低，建議升高，此處改為9.0

image.png

?RCTRootView.h file not found

在Header Search Paths 添加 $(SRCROOT)/../node_modules/react-native/React

?(暫未遇到)
在Other Linker Flags中添加-lc++即可。
注：-lc++要添加在JavaScriptCore之后，否則編譯也不過。

Undefined symbols for architecture x86_64:
"std::terminate()", referenced from:
___clang_call_terminate in libReact.a(RCTJSCExecutor.o)
"___cxa_begin_catch", referenced from:
___clang_call_terminate in libReact.a(RCTJSCExecutor.o)
"___gxx_personality_v0", referenced from:
-[RCTJavaScriptContext initWithJSContext:onThread:] in libReact.a(RCTJSCExecutor.o)
-[RCTJavaScriptContext init] in libReact.a(RCTJSCExecutor.o)
-[RCTJavaScriptContext invalidate] in libReact.a(RCTJSCExecutor.o)
_RCTNSErrorFromJSError in libReact.a(RCTJSCExecutor.o)
+[RCTJSCExecutor runRunLoopThread] in libReact.a(RCTJSCExecutor.o)
-[RCTJSCExecutor init] in libReact.a(RCTJSCExecutor.o)
-[RCTJSCExecutor context] in libReact.a(RCTJSCExecutor.o)
...
ld: symbol(s) not found for architecture x86_64

?如果是版本0.45=<x<=0.46，則需要增加RCTBatchedBridge，cocoapods中增加BatchedBridge，如果版本>0.46則需要用RCTCxxBridge，增加DoubleConversion, Folly,Glog。

Undefined symbols for architecture x86_64:
  "_JSNoBytecodeFileFormatVersion", referenced from:
      +[RCTJavaScriptLoader loadBundleAtURL:onProgress:onComplete:] in RCTJavaScriptLoader.o
      +[RCTJavaScriptLoader attemptSynchronousLoadOfBundleAtURL:runtimeBCVersion:sourceLength:error:] in RCTJavaScriptLoader.o
  "facebook::react::parseTypeFromHeader(facebook::react::BundleHeader const&)", referenced from:
      +[RCTJavaScriptLoader attemptSynchronousLoadOfBundleAtURL:runtimeBCVersion:sourceLength:error:] in RCTJavaScriptLoader.o
  "facebook::react::customJSCWrapper()", referenced from:
      -[RCTDevSettings isJSCSamplingProfilerAvailable] in RCTDevSettings.o
      -[RCTDevSettings toggleJSCSamplingProfiler] in RCTDevSettings.o
      _RCTNSErrorFromJSErrorRef in RCTJSCErrorHandling.o
      -[RCTSamplingProfilerPackagerMethod handleRequest:withResponder:] in RCTSamplingProfilerPackagerMethod.o
  "facebook::react::systemJSCWrapper()", referenced from:
      -[RCTDevSettings isJSCSamplingProfilerAvailable] in RCTDevSettings.o
      -[RCTDevSettings toggleJSCSamplingProfiler] in RCTDevSettings.o
      _RCTNSErrorFromJSErrorRef in RCTJSCErrorHandling.o
      -[RCTSamplingProfilerPackagerMethod handleRequest:withResponder:] in RCTSamplingProfilerPackagerMethod.o
ld: symbol(s) not found for architecture x86_64
clang: error: linker command failed with exit code 1 (use -v to see invocation)

修改Podfile

platform :ios, '9.0'
use_frameworks!
target 'iOSInstallRN' do
pod 'AFNetworking'
pod 'MBProgressHUD'
pod 'React', :path => './reactnative/node_modules/react-native', :subspecs => [
  'Core',
  'DevSupport',
  'RCTText',
  'RCTNetwork',
  'RCTWebSocket',
  'RCTImage',
  'RCTGeolocation',
  'RCTSettings',
  'CxxBridge' # Include if RN >= 0.47
  ]
pod 'yoga', :path => './reactnative/node_modules/react-native/ReactCommon/yoga'
pod 'DoubleConversion', :podspec => './reactnative/node_modules/react-native/third-party-podspecs/DoubleConversion.podspec'
pod 'Folly', :podspec => './reactnative/node_modules/react-native/third-party-podspecs/Folly.podspec'
pod 'glog', :podspec => './reactnative/node_modules/react-native/third-party-podspecs/glog.podspec'

end

1、如果可以翻墻 直接pod install
2、(我采用此方法)如果不能, 新建third-party文件,在百度云上面下載這四個(gè)文件解壓，將4個(gè)文件放入third-party中

?
#import <React/RCTRootView.h>

image.png

?
cd reactnative
react-native start

image.png

項(xiàng)目地址

https://github.com/chjwrr/iOSInstallReactNative

cd reactnative
yarn install