React-Native 集成到现有项目实践

Xcode,Ios
需要安装过React-Native相关环境和cocoa pods。

准备工作:

React Native 借助 Node.js，即 JavaScript 运行时来创建 JavaScript 代码。如果你已经安装了 Node.js，那就可以上手了。

首先，使用 Homebrew 官网提供的指引安装 Homebrew，然后在终端执行以下命令：

1	brew install node

接下来，使用 homebrew 安装 watchman，一个来自Facebook 的观察程序：

1	brew install watchman

通过配置 watchman，React 实现了在代码发生变化时，完成相关的重建的功能。就像在使用 Xcode 时，每次保存文件都会进行一次创建。

STEP 1 : 安装node_modules包

创建package.json文件在项目的根目录下，这是为工程添加依赖库。里面有工程的版本信息和所需要的依赖库，第三方库等

{
  "name": "YourProjectName",
  "version": “1.0.0",
  "private": true,
  "scripts": {
    "start": "node ./node_modules/react-native/local-cli/cli.js start"  
  },
  //所需要的库
  "dependencies": {
    "react": "15.4.0",
    "react-native": “0.39.0",
    "react-native-looped-carousel": "0.0.12”,// 组件
  }
}

注意上面的 /node_modules/react-native这个路径，保持一致

然后在项目的根目录下运行

npm install

安装package.json中所需要的库。完成后在项目根目录下会生成一个node_modules文件夹

STEP 2: pod所需要的库到工程

创建podfile文件，利用Cocoapods安装podfile中所涉及到的库。

target 'YourProjectName' do

  # Your 'node_modules' directory is probably in the root of your project,
  # but if not, adjust the `:path` accordingly
  pod 'React', :path => './node_modules/react-native', :subspecs => [
    'Core',
    'RCTText’,’RCTNetwork’,
    'RCTWebSocket',
  ]
end

注意上面的 /node_modules/react-native 这个路径，保持一致

然后进行 pod install 安装库

pod install


STEP 3: 创建index.iOS文件

在根目录下创建index.ios文件,写一个简单的textview

注意index.ios的存放位置

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


class SimpleApp extends React.Component {
  render() {
    return <View style={styles.container}>
        <Text style={styles.container1} > This is a simple application.</Text>
      </View>;
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    backgroundColor: 'green'
  },
  container1: {
    flex: 1,
    fontSize: 20,
    textAlign: 'center',
    backgroundColor: 'green',
    color: 'red'
  }

});
AppRegistry.registerComponent('SimpleApp', () => SimpleApp);

SimpleApp就是你的模块名，这个在后面会要用到。

STEP 4:添加到原生项目

往应用里添加容器视图

你需要添加一个容器视图来容纳React Native组件。它可以是你应用里任何的UIView。
不过，为了让代码更整洁，我们可以派生一个UIView，取名ReactView。打开你的Yourproject.xcworkspace来创建一个新的ReactView类（你也可以取任何你想要的名字！）

// ReactView.h

#import <UIKit/UIKit.h>
@interface ReactView : UIView
@end

在想要管理这个视图的视图管理器中，添加一个outlet然后连接它：

// ViewController.m

@interface ViewController ()
@property (weak, nonatomic) IBOutlet ReactView *reactView;
@end

往容器视图里添加RCTRootView

准备好开始最有意思的部分了吗？现在我们要创建RCTRootView来包含你的React Native应用。

在ReactView.m中，我们需要先使用你的index.ios.bundle的URI来初始化RCTRootView。index.ios.bundle会由packager服务创建，可以通过React Native服务器访问到。我们会在后面讨论这个问题。

NSURL *jsCodeLocation = [NSURL URLWithString:@"http://localhost:8081/index.ios.bundle?platform=ios"];
// For production use, this `NSURL` could instead point to a pre-bundled file on disk:
//
//   NSURL *jsCodeLocation = [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"];
//
// generated by "Bundle React Native code and images" build step.
//
//   curl http://localhost:8081/index.ios.bundle -o main.jsbundle
RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation
                                                    moduleName: @"SimpleApp"
                                                 launchOptions:nil];

然后把它添加为ReactView的子视图。

[self addSubview:rootView];
rootView.frame = self.bounds;

启动开发服务器。

在工程的根目录下，我们可以开启React Native开发服务器：

(JS_DIR=`pwd`/ReactComponent; cd node_modules/react-native; npm run start -- --root $JS_DIR)


这条命令会启动一个React Native开发服务器，用于构建我们的bundle文件。--root选项用来标明你的React Native应用所在的根目录。在我们这里是ReactComponents目录，里面有一个index.ios.js文件。开发服务器启动后会打包出index.ios.bundle文件来，并可以通过http://localhost:8081/index.ios.bundle来访问。

这里有个坑，在模拟器调试的时候，要将上面的http://localhost:8081/index.ios.bundle 替换为http://127.0.0.1:8081/index.ios.bundle，
原因之一：做本地局域网开发环境，大部分都会做服务器映射处理，localhost 被指向特定的IP 而不是本机的127.0.0.1， 就会出现这样的问题。

错误信息处理

error1: Invariant Violation:Application 项目名 has not been registered.

这个错误的原因是index.ios.js 中的注册名，和代码中的引用名不同；

index.ios.js 中

AppRegistry.registerComponent('Study', () => ReactTest);

ios 代码中引用

jsCodeLocation = [NSURL URLWithString:@"http://192.168.1.102:8081/index.ios.bundle?platform=ios&dev=true"];

参考：React-Native坑1：Invariant Violation:Application 项目名 has not been registered.

error2: Could not connect to development server.

这个错误的原因是localost识别问题。解决方式一，修改host文件。方式二, 使用本机ip, 运行之前首先要启动npm start

参考:react native小试身手

React Native 运行出现 Could not connect to development server 解决方法

error3:Native module cannot be null

这个错误的原因是项目中使用的ReactNative模块没有加入到项目中，解决方式参考集成步骤中的5. 仔细检查自己的项目和报错信息。

参考：React-native, “Native module cannot be null”

使用链接库

RN 集成到IOS原生应用时，出现 Native module cannot be null原因？

error4:Undefined symbols for architecture x86_64: “std::terminate()”, referenced from

运行项目时Xcode报错。

解决办法:add -lc++ in Other Linker Flags in your xcode project build settings.

参考：undefined-symbols-for-architecture-x86-64-stdterminate-referenced-from

学习资料： http://reactnative.cn

Navigator组件:  http://www.jianshu.com/p/91fa0f34895e

布局： http://blog.csdn.net/teng_ontheway/article/details/51870951