react native （五）嵌入到原生应用

今天一天算是只研究了这部分，现在把不用终端 react native init命令创建工程，直接在现有的工程上嵌入react native，现将步骤归结如下：

1.先建一个空文件夹实际上（命名我都和现有xcode工程名相同）然后把你工程的文件夹拽入该文件夹中，并将工程文件夹改为ios（目的和官方文档上一直，我感觉这样也不容易出错）如图：

现在把你的工程cocopops管理（cocopops安装就滤过啦） ，因为后面要用它来加载库

2.现在工程添加好，开始创建package.json文件
这个简单，创建一个空的json文件，然后将下面一段代码复制到里面
{
“name”: “realNameAction”,
“version”: “0.0.1”,
“private”: true,
“scripts”: {
“start”: “node node_modules/react-native/local-cli/cli.js start”
},
“dependencies”: {
“react”: “15.0.2”,
“react-native”: “0.38.0”
}
}

将上面的name改为你的项目名称,react-native改为你当前的react native版本（打开你当时 react native init命令创建的工程的package.json文件就一目了然啦，改改的就改好啦，这样也是确保不出错嘛），将package.json文件放到根目录下面。

3.安装依赖包
打开的你终端切到你的根目录文件夹（cd /Users/sich/realNameAction ）然后

$ npm install

等个几十秒，可以看到在根目录下多了一个文件夹，走到这步可以看到目录是这样的啦。

4.Podfile文件
target ‘realNameAction’ do

pod ‘React’, :path => ‘../node_modules/react-native’, :subspecs => [
‘Core’,
‘RCTText’,
‘RCTNetwork’,
‘RCTWebSocket’,
]

end

注意改为您的工程名字，注意如果你上一步完成的node_modules没在你的根目录下面
，上面的:path => ‘../node_modules/react-native’需要你调整为自己的路径
最后把Podfile文件安装上就好啦。

5.走到这一步，恭喜您已经配置好，接下来就是index.ios.js了，还是放到根目录下面
终端切到根目录下面，然后
touch index.ios.js
这样就创建了一个空的index.ios.js文件

这样所有的文件就创建好啦，嘿嘿

6.编写您的js代码，你可以先用官网的代码测试一下效果，现将官网的代码粘贴下面
‘use strict’;

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

class realNameAction extends React.Component {
render() {
var contents = this.props[“scores”].map(
score => {score.name}:{score.value}{“\n”}
);
return (


2048 High Scores!


{contents}


);
}
}

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(‘realNameAction’, () => realNameAction);

realNameAction要改为你自己的Xcode工程名哦。

7.嵌入xcode项目中。
打开xcode项目，在你需要加载js的地方写入以下代码：
NSURL *jsCodeLocation = [NSURL
URLWithString:@”http://localhost:8081/index.ios.bundle?platform=ios“];
RCTRootView *rootView =
[[RCTRootView alloc] initWithBundleURL : jsCodeLocation
moduleName : @”realNameAction”
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 “RCTRootView.h”

其中8081是默认的端口号，localhost是指您的电脑，可以用你电脑的IP（不知道为什么在我测试的时候用localhost，一直报没法访问到服务器，而换为电脑IP地址就好啦）。

8.运行测试
首先要启动终端（貌似就是创建了一个服务器 ，我也不知道这样理解对不对）
首先切到node_modules目录（我的：cd /Users/sich/realNameAction/node_modules）
然后运行：

$ npm start

这样就可以看到启动了，其中也可以看到端口默认的为8081，其中运行xcode模拟器，默认的是iPhone6，注意在整个测试过程中，该终端不要关闭。运行在模拟器上可以看到效果，在修改js后可以直接common+R刷新模拟器，后common+D然后Reload。
真机测试：真机测试要保证你的手机与电脑在同一网络，并设置端口号为8081：
设置—》无线局域网—》选中要连接的网络进入，下面HTTP代理处选择手动，服务器是你连接的电脑的IP，端口默认的8081，这样就OK啦。