将RN项目集成到你的项目-iOS

关于RN的环境搭建请参考搭建开发环境，最好自己创建了AwesomeProject，因为有些配置文件可以直接从Demo中copy

1.在你的Xcode项目中找到XXX.xcodeproj，在其上层目录新建文件夹RNDemoMudules（为了解耦RN组件于原生工程，方便单独管理RN项目），并在其中创建package.json

package.json：（可以直接从AwesomeProject项目中找到该文件，注意要修改项目名称）

{
  "name": "RNDemo",//你的项目名称
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "node node_modules/react-native/local-cli/cli.js start",
    "test": "jest"
  },
  "dependencies": {
    "react": "16.8.3",
    "react-native": "0.59.8"
  },
  "devDependencies": {
    "@babel/core": "^7.4.5",
    "@babel/runtime": "^7.4.5",
    "babel-jest": "^24.8.0",
    "jest": "^24.8.0",
    "metro-react-native-babel-preset": "^0.54.1",
    "react-test-renderer": "16.8.3"
  },
  "jest": {
    "preset": "react-native"
  }
}

然后在终端进入当前目录，运行下面命令

$ npm install  //若npm没有安装，自行度娘安装。

2.安装依赖库，一般IOS开发的cocoapods是必须安装的，这里就不做说明了。

• 注意Podfile和我们平常安装一样要在Project目录下
• 在Podflie文件必须要增加platform控制，一般在IOS 8.0 以上

Podfile的具体内容：

# Uncomment the next line to define a global platform for your project
# platform :ios, '9.0'

target 'RNDemo' do
    # 'node_modules'目录一般位于根目录中
    # 但是如果你的结构不同，那你就要根据实际路径修改下面的`:path`
    rn_path = '../RNDemoMudules/node_modules/react-native'
    
    pod 'React', :path => rn_path, :subspecs => [
    'Core',
    'DevSupport', # 如果RN版本 >= 0.43，则需要加入此行才能开启开发者菜单
    'RCTText',
    'RCTNetwork',
    'RCTWebSocket', # 这个模块是用于调试功能的
#    'BatchedBridge' # 注意ReactNative中文网站没有使用该库，会导致Xcode运行时报错。调试时提示该库已经被弃用了，但还没找到对应的库
    # 在这里继续添加你所需要的RN模块
    'CxxBridge',
    'RCTActionSheet',
    'RCTAnimation',
    'RCTGeolocation',
    'RCTImage',
    'RCTLinkingIOS',
    'RCTSettings',
    'RCTVibration',
    ]
    # 如果你的RN版本 >= 0.42.0，则加入下面这行
    pod 'yoga', :path => "#{rn_path}/ReactCommon/yoga"
    pod 'Folly', :podspec => "#{rn_path}/third-party-podspecs/Folly.podspec"
    

end

安装Podfile：

$ pod install

3.创建 RN项目组件

在与刚才创建的package.json文件的同级目录下创建index.js文件（旧版本是创建index.ios.js 和 index.Android.js文件，这点要注意一下） 可以直接将AwesomeProject目录中的index.js、App.js、app.json复制到此目录下

index.js：

/**
 * @format
 */

import {AppRegistry} from 'react-native';
import App from './App';
import {name as appName} from './app.json';

AppRegistry.registerComponent(appName, () => App);

App.js:

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow
 */

import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View} from 'react-native';

const instructions = Platform.select({
  ios: 'Press Cmd+R to reload,\n' + 'Cmd+D or shake for dev menu',
  android:
    'Double tap R on your keyboard to reload,\n' +
    'Shake or press menu button for dev menu',
});

type Props = {};
export default class App extends Component {
  render() {
    return (
      
        Welcome to React Native!
        To get started, edit App.js
        {instructions}
      
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});

app.json:（记得修改项目名称，原名称为AwesomeProject）

{
  "name": "RNDemo",
  "displayName": "RNDemo"
}

4.在Xcode项目中创建RN项目组件容器

现在我们需要使用RCTRootView类来家在我们的ReactNative模块，其实在我们上面做那么多的工作的时候，工程会给我们生成一个.bundle文件，我们只需要加载该bundle文件即可，这就和IOS的资源文件加载机制相吻合了，最后JS文件以bundle的形式加载。
新建一个RNDemoViewController。
RNDemoViewController.h:

#import 

NS_ASSUME_NONNULL_BEGIN

@interface RNDemoViewController : UIViewController

@end

NS_ASSUME_NONNULL_END

RNDemoViewController.m:

#import "RNDemoViewController.h"
#import 
@interface RNDemoViewController ()

@end

@implementation RNDemoViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view.
    
    NSURL *jsCodeLocation = [NSURL
                             URLWithString:@"http://localhost:8081/index.bundle?platform=ios"];
    RCTRootView *rootView =
    [[RCTRootView alloc] initWithBundleURL : jsCodeLocation
                         moduleName        : @"RNDemo"
                         initialProperties : nil
                          launchOptions    : nil];
    
    self.view = rootView;
    
}

@end

现在万事俱备，只欠东风了，但是目前我们的JS文件并没有打包到工程中，那么我们需要给把JS文件放到服务器上去，这些ReactNative都帮我们处理好了，当我们后续需要打包的时候，会处理成Bundle的形式内嵌到工程里面去，那么现在我们需要借助ReactNative来把服务器运行起来：

$ react-native start

现在就真的万事俱备了，若有Xcode的话直接运行Xcode就可以了，若没有Xcode的话，那可以直接使用ReactNative的命令：

 $ react-native run-ios

---

引用：
https://blog.csdn.net/flylovesky127/article/details/79795601
https://github.com/facebook/react-native/issues/24192