所以环境：macOS Sierra,Xcode 9.2,RN 0.51.0

项目名称：MyApp

准备

>从“Single View App”模板,产品名称“MyApp”,语言Objective-C创建新的Xcode项目
>运行,看到它的工作原理
> cd MyApp,mkdir ios,mv MyApp * ios(将所有ios相关文件移至ios子文件夹)

安装npm依赖项

在项目的根文件夹中创建package.json(非常基本)

{
  "name": "MyApp","version": "0.0.1","private": true,"scripts": {
    "start": "node node_modules/react-native/local-cli/cli.js start"
  },"dependencies": {
    "react": "16.0.0","react-native": "0.51.0"
  },"devDependencies": {
    "babel-jest": "22.0.4","babel-preset-react-native": "4.0.0"
  }
}

运行npm install

Seup cocoapods

> cd ios
> pod init(生成Podfile)
>在MyApp目标中的Podfile中声明反应依赖项

pod 'React',:path => '../node_modules/react-native',:subspecs => [
    'Core','CxxBridge','RCTAnimation','RCTBlob','RCTText','RCTNetwork','RCTWebSocket','RCTImage','RCTLinkingIOS','DevSupport',]
pod 'yoga',:path => '../node_modules/react-native/ReactCommon/yoga'
pod 'DoubleConversion',:podspec => '../node_modules/react-native/third-party-podspecs/DoubleConversion.podspec'
pod 'GLog',:podspec => '../node_modules/react-native/third-party-podspecs/GLog.podspec'
pod 'Folly',:podspec => '../node_modules/react-native/third-party-podspecs/Folly.podspec'

您可以添加/删除React subspecs以包含/删除RN功能,这是一个艰难的过程,因为RN组件不完全独立.

> pod install(将pod整合到项目中,将创建MyApp.xcworkspace,它应该用于编译应用程序)
>打开MyApp.xcworkspace,build&运行,应用程序应该仍然有效

嵌入RN Root View

用这个片段替换你的AppDelegate.m：

#import "AppDelegate.h"
 
#import <React/RCTBundleURLProvider.h>
#import <React/RCTRootView.h>
#if RCT_DEV
#import <React/RCTDevLoadingView.h>
#endif
 
@implementation AppDelegate
 
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
  RCTBundleURLProvider* provider = [RCTBundleURLProvider sharedSettings];
  NSURL* jsCodeLocation = [provider jsBundleURLForBundleRoot:@"index" fallbackResource:nil];
 
  RCTBridge *bridge = [[RCTBridge alloc] initWithBundleURL:jsCodeLocation moduleProvider:nil launchOptions:launchOptions];
#if RCT_DEV
  [bridge moduleForClass:[RCTDevLoadingView class]];
#endif
  RCTRootView *rootView = [[RCTRootView alloc] initWithBridge:bridge moduleName:@"MyApp" initialProperties:@{}];
  rootView.backgroundColor = [[UIColor alloc] initWithRed:1.0f green:1.0f blue:1.0f alpha:1];
 
  self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds];
  UIViewController *rootViewController = [UIViewController new];
  rootViewController.view = rootView;
  self.window.rootViewController = rootViewController;
  [self.window makeKeyAndVisible];
  return YES;
}
 
@end

>向Info.plist添加ATS例外(或MyApp将无法使用http连接到打包服务器)

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

>编译&在模拟器中运行时,您应该会看到红色屏幕,并显示“没有捆绑URL存在”的消息. (这是因为没有运行包装器的服务器而且没有编译的jsbundle存在)

Javascript部分

使用此代码创建MyApp / index.js(它来自RN模板)：

import { AppRegistry } from 'react-native';
import App from './App';
AppRegistry.registerComponent('MyApp',() => App);

创建MyApp / App.js：

import React from 'react';
import { StyleSheet,Text,View } from 'react-native';
 
export default class App extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>
          Welcome to React Native!
        </Text>
      </View>
    );
  }
}
 
const styles = StyleSheet.create({
  container: {
    flex: 1,justifyContent: 'center',alignItems: 'center',backgroundColor: '#F5FCFF',},welcome: {
    fontSize: 20,textAlign: 'center',margin: 10,});

>启动打包器npm从根项目文件夹(MyApp)开始
>从xcode运行应用程序,您应该看到加载指示器,然后看到RN渲染屏幕“欢迎使用React Native！”

包装机

>您还应该添加packager构建步骤,将已编译的js嵌入到app bundle main.jsbundle中,这样它就可以在没有packager dev服务器的情况下运行.

使用以下内容向MyApp目标的构建阶段添加脚本步骤：

export NODE_BINARY=node
../node_modules/react-native/scripts/react-native-xcode.sh

这个步骤对我有用.