rn项目 假如cocoapods_RN集成到现有iOS项目（demo）
首先考虑集成到现有的项目，而不是新建一个项目从0->100
那么文件目录是什么样？
需要配置什么？
包含哪些文件？
等实现helloworld之后再回过头看整体的流程是什么样？
Paste_Image.png
这里默认上一篇文章中的配置都已完成。
－－－－配置－－－－
1、安装cocoapods
pod安装：pod init
卸载pod：sudo gem uninstall cocoapods
安装pod：sudo gem install cocoapods pod setup
2、我们把具体的依赖包记录在package.json文件中
{
"name": "rn_testAddRNIntoProject",
"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.26.1"
}
}
安装node_modules/ ,cd到根目录，执行以下命令
npm install
会有这么一个文件夹
Paste_Image.png
3、配置Podfile，创建xcworkspace
初始文件目录(马赛克的地方一开始没有)：
cd 到这个目录，然后：pod init
Paste_Image.png
在项目根目录新建Podfile(已安装pod)如果pod init一直出错，先不用管它，直接创建Podfile文件，编写需要的内容，再pod install就可以了：
运行：pod install
Paste_Image.png
pod 内容：
# 这里写上项目名⬇️
target 'rn_testAddRNIntoProject' 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', # needed for debugging
# Add any other subspecs you want to use in your project
]
end
Subspecs
The list of supported subspec
s are in "node_modules/react-native/React.podspec"
If you want to add the React Native Text library (e.g., for elements), then you will need the RCTText subspec
If you want the Image library (e.g., for elements), then you will need the RCTImage subspec
－－－－创建index.ios.js文件－－－－
$ touch index.ios.js
'use strict';
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 => {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,
},
});
// Module name
AppRegistry.registerComponent('RNHighScores', () => RNHighScores);
－－－－iOS代码调用RN代码－－－－
这里提醒一句：所有使用<>的地方，都先完整写好<>,再写参数，否则很容易忘记补全，新手已经自坑几次了
在测试项目中，什么都没有，不过需要添加一个按钮的点击事件：
#import "RCTRootView.h"
- (IBAction)buttonPress:(id)sender {
NSLog(@"High Score Button Pressed");
NSURL *jsCodeLocation = [NSURL
URLWithString:@"http://localhost:8081/index.ios.bundle?platform=ios&dev=true"];
RCTRootView *rootView =
[[RCTRootView alloc] initWithBundleURL : jsCodeLocation
moduleName : @"rn_testAddRNIntoProject"
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];
}
plist文件中增加以下代码，用于通过https SSL/ATL 安全性验证：
NSAppTransportSecurityNSExceptionDomainslocalhostNSTemporaryExceptionAllowsInsecureHTTPLoads
－－－－完成－－－－
至此，一个测试demo就完成了
开始运行：
$ npm start
$ react-native run-ios
Paste_Image.png
Paste_Image.png
可以遇到的错误及解决办法：
1、_refreshControl报错：增加_refreshControl引用
Paste_Image.png
2、RCTSRWebSocket.m报错
解决：方法名前添加(void)
(void)SecRandomCopyBytes(kSecRandomDefault, keyBytes.length, keyBytes.mutableBytes);
3、"std::terminate()", referenced from:
Paste_Image.png
Paste_Image.png
Paste_Image.png
4、运行后的错误，
Paste_Image.png
解决：来自－填坑先驱
原因就是没有检查代码:
moduleName是项目名，不是js中的class名
Paste_Image.png