Swift项目引入react-native

一.创建一个Swift工程,姑且为RNApp

二.创建RNComponent文件夹

在项目中建一个名为RNComponent的文件夹,用于存放我们react-native的相关文件, 再创建一个package.json文件, 用于初始化react-native.（文件夹名字自定义哈）
文件目录结构如下：

package.json文件内容如下

其中name为项目名称,devDependencies和jest均可以不要,我是直接新建了一个同名的RN项目( react-native init ProjectName --version 0.44.2 )把其中的package.json和index.ios.js文件扯过来用的 

三,安装React Native依赖包

在RNComponent目录下运行命令行： 

npm install

这个过程比较费时,可以直接把RN项目中的node_modules文件夹直接拖过来用(亲测可用)

四.Cocoapods集成React Native

Podfile文件内容为（需确保路径对）：

# 请将:path后面的内容修改为正确的路径（一定要确保正确～～）。

pod 'React', :path => ‘./RNComponent/node_modules/react-native', :subspecs => [
'Core',
'ART',
'RCTActionSheet',
'RCTAdSupport',
'RCTGeolocation',
'RCTImage',
'RCTNetwork',
'RCTPushNotification',
'RCTSettings',
'RCTText',
'RCTVibration',
'RCTWebSocket',
'RCTLinkingIOS',
]

在终端执行 pod install 会出现下图错误

这是因为在指定的路径没有寻找到相应的组件。此时就需要修改podfile文件中的路径，由于上方提示没有 Yoga，那我们就指定Yoga的路径。如下：

# 请将:path后面的内容修改为正确的路径（一定要确保正确～～）。
pod 'Yoga', :path => './RNComponent/node_modules/react-native/ReactCommon/yoga'

pod 'React', :path => ‘./RNComponent/node_modules/react-native', :subspecs => [
'Core',
'ART',
'RCTActionSheet',
'RCTAdSupport',
'RCTGeolocation',
'RCTImage',
'RCTNetwork',
'RCTPushNotification',
'RCTSettings',
'RCTText',
'RCTVibration',
'RCTWebSocket',
'RCTLinkingIOS',
]

重新执行pod install 成功

五.原生项目处理

1.添加RNViewController   

  代码如下 

import UIKit
import React

class RNViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()

        let strUrl: String = "http://localhost:8081/index.ios.bundle?platform=ios&dev=true"
        let jsCodeLocation = URL(string: strUrl)
        let rootView = RCTRootView(bundleURL: jsCodeLocation, moduleName: "RNApp", initialProperties: nil, launchOptions: nil)
        view = rootView
    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }
}

2. iOS项目更新App Transport Security

在iOS 9以上的系统中，除非明确指明，否则应用无法通过http协议连接到localhost主机。 我们建议你在Info.plist文件中将localhost列为App Transport Security的例外。 如果不这样做，在尝试通过http连接到服务器时，会遭遇这个错误 - Could not connect to development server.

打开工程中的 Info.list 文件，添加下面配置即可：  

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

配置效果如下：

3. 启动开发服务器

在运行我们的项目之前，我们需要先启动我们的开发服务器。进入 reactnative目录 ,然后命令行启动服务：

react-native start

(或者找到server，在node_moduls/react-native/local-cli/server，在此目录中执行npm start 启动服务。)

多个运行时会出现下图错误,

这是因为已经有一个端口为8081的本地服务器在运行了,,把在运行的关闭,重新执行代码启动服务器,

command R 运行工程
工程运行时出现的错误
1,如下图 

XCODE打印

URL: http://localhost:8081/index.ios.bundle?platform=ios&dev=true, NSLocalizedFailureReason=The resource could not be loaded because the App Transport Security policy requires the use of a secure connection.}
2017-09-12 14:43:49.571 [fatal][tid:main] Could not connect to development server.

Ensure the following:
- Node server is running and available on the same network - run 'npm start' from react-native root
- Node server URL is correctly set in AppDelegate

解决办法 将 

let strUrl: String = "http:// localhost:8081/index.ios.bundle?platform=ios&dev=true"

改为

let strUrl: String = "http://192.168.0.61:8081/index.ios.bundle?platform=ios&dev=true"

原因之一：做本地局域网开发环境，大部分都会做服务器映射处理，localhost 被指向特定的IP 而不是本机的192.168.0.61， 就会出现这样的问题。

到这一步终于可以显示RN的界面了

但是xcode会一直打印

2017-09-12 14:49:09.594815+0800 RNApp[16828:281355] [] nw_connection_get_connected_socket_block_invoke 3 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! 这样就没问题了 

大功告成!!!!!!