搭建环境

首先你需要搭建RN的环境。

第一步：

brew install node
brew install watchman

如果你的homebrew没有升级，那么你可以打开终端：

 /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

第二步，设置镜像

npm config set registry https://registry.npm.taobao.org --global
npm config set disturl https://npm.taobao.org/dist --global

第三步，安装命令行工具

npm install -g yarn react-native-cli

第四步，接下来设置镜像源：

yarn config set registry https://registry.npm.taobao.org --global
yarn config set disturl https://npm.taobao.org/dist --global

之后你就可以用yarn代替npm install命令，用yarn add 某第三方库名代替npm install 某第三方库名。如果出现permission denied的错误，那么你需要查看第三步安装后的给出的信息，

sudo chown -R $USER:$(id -gn $USER) /Users/你的mac用户名/.config

第五步，创建一个新项目：

react-native init AwesomeProject

这个命令会在你当前路径创建一个AwesomeProject项目。

你可以cd到这个项目中来启动这个项目

cd AwesomeProject
react-native run-ios

集成进自己的项目

第一步，在项目根目录创建react文件夹并将AwesomeProject项目下面的App.js、app.json、index.js、package.json拷贝到React文件夹下面
修改app.json中的name和displayName为 iOS工程的名称
修改package.json中的name 为 iOS工程的名称

第二步，安装依赖
cd 到react目录，执行

npm install

完成后会在React目录中生成一个node_modules文件夹

第三步，添加react Native框架

打开podfile文件修改：

pod'React', :path => './React/node_modules/react-native', :subspecs => [
    'Core',
    'CxxBridge',
    'DevSupport',
    'RCTText',
    'RCTNetwork',
    'RCTWebSocket',
  ]
  # 如果你的RN版本 >= 0.42.0，则加入下面这行。
  pod"yoga", :path => "./React/node_modules/react-native/ReactCommon/yoga"
 # 这里注意： 如果是0.49以下的RN，则使用下面这条：
 # pod "Yoga", :path => "./React/node_modules/react-native/ReactCommon/yoga"

   # 如果RN版本 >= 0.45则加入下面三个第三方编译依赖
  pod'DoubleConversion', :podspec => './React/node_modules/react-native/third-party-podspecs/DoubleConversion.podspec'
  pod'glog', :podspec => './React/node_modules/react-native/third-party-podspecs/glog.podspec'
  pod'Folly', :podspec => './React/node_modules/react-native/third-party-podspecs/Folly.podspec'

然后pod install。
这里我遇到了一个

No such file or directory @ rb_sysopen

的错误，原因是文件路径不太对，把上面的：path修改后就可以了

修改后代码：

pod 'React', :path => './React/node_modules/react-native', :subspecs => [
  'Core',
  'CxxBridge', # 如果RN版本 >= 0.47则加入此行
  'DevSupport', # 如果RN版本 >= 0.43，则需要加入此行才能开启开发者菜单
  'RCTText',
  'RCTNetwork',
  'RCTWebSocket', # 调试功能需要此模块
  'RCTAnimation', # FlatList和原生动画功能需要此模块
  # 在这里继续添加你所需要的其他RN模块
  ]
  # 如果你的RN版本 >= 0.42.0，则加入下面这行
  pod 'yoga', :path => './React/node_modules/react-native/ReactCommon/yoga'

  # 如果RN版本 >= 0.45则加入下面三个第三方编译依赖
  pod 'DoubleConversion', :podspec => './React/node_modules/react-native/third-party-podspecs/DoubleConversion.podspec'
  pod 'glog', :podspec => './React/node_modules/react-native/third-party-podspecs/glog.podspec'
  pod 'Folly', :podspec => './React/node_modules/react-native/third-party-podspecs/Folly.podspec'

然后，继续pod install安装。

运行第一个iOS RN应用

可以按官方教程来，首先打开index.js,将官方里面的内容

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

class RNHighScores extends React.Component {
  render() {
    var contents = this.props['scores'].map((score) => (
      <Text key={score.name}>
        {score.name}:{score.value}
        {'\n'}
      </Text>
    ));
    return (
      <View style={styles.container}>
        <Text style={styles.highScoresTitle}>2048 High Scores!</Text>
        <Text style={styles.scores}>{contents}</Text>
      </View>
    );
  }
}

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

// 整体js模块的名称
AppRegistry.registerComponent('RNHighScores', () => RNHighScores);

复制进去，然后iOS项目中添加代码:

- (void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event{
    NSURL *jsCodeLocation = [NSURL URLWithString:@"http://localhost:8081/index.bundle?platform=ios"];
    
    RCTRootView *rootView =
    [[RCTRootView alloc] initWithBundleURL: jsCodeLocation
                                moduleName: @"RNHighScores"
                         initialProperties:
     @{
       @"scores" : @[
               @{
                   @"name" : @"Alex",
                   @"value": @"42"
                   },
               @{
                   @"name" : @"Joel",
                   @"value": @"10"
                   }
               ]
       }
                             launchOptions: nil];
    UIViewController *vc = [[UIViewController alloc] init];
    vc.view = rootView;
    [self presentViewController:vc animated:YES completion:nil];
}

需要导入头文件#import <React/RCTRootView.h>。
然后，启动rn监听和服务，