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啦。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值