引入的前提是你的电脑已经配置好了React Native的环境。
参考链接：搭建RN的开发环境
1，建立目录结构
image.png
初始目录只需有“OCToReactNative”(这是整个的项目名，可以和iOS项目命名不相同)，初始目录里建立一个ios文件夹即可，然后在ios文件夹里复制已有的OC项目进来，不需要再有总目录
2，安装JavaScript依赖包
可以直接从已有的RN项目中复制一个过来，也可以按如下步骤新建一个：
touch package.json
打开package.json进行编辑
{
"name": "OCToReactNative",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start"
},
"dependencies": {
"react": "16.0.0-alpha.6",
"react-native": "0.44.3"
}
}
以下是官网是对于这个依赖文件的说明：
示例中的version字段没有太大意义（除非你要把你的项目发布到npm仓库）。scripts中是用于启动packager服务的命令。dependencies中的react和react-native的版本取决于你的具体需求。一般来说我们推荐使用最新版本。你可以使用npm info react和npm info react-native来查看当前的最新版本。另外，react-native对react的版本有严格要求，高于或低于某个范围都不可以。本文无法在这里列出所有react native和对应的react版本要求，只能提醒读者先尝试执行npm install，然后注意观察安装过程中的报错信息，例如require react@某.某.某版本, but none was installed，然后根据这样的提示，执行npm i -S react@某.某.某版本。如果你使用多个第三方依赖，可能这些第三方各自要求的react版本有所冲突，此时应优先满足react-native所需要的react版本。其他第三方能用则用，不能用则只能考虑选择其他库。
有了依赖文件，接下来安装React和React Native模块。
npm install
3，安装CocoaPods
CocoaPods是针对iOS和Mac开发的包管理工具。我们用它来把React Native框架的代码下载下来并添加到当前的项目中。 我们建议使用Homebrew来安装CocoaPods，的确会比原来导入CocoaPods简单很多。
第一步安装源
brew install cocoapods
第二步配置依赖
pod init
生成了Podfile文件，打开并编辑之：
# target的名字与OC项目名字相同
target 'React Native' do
# 'node_modules'目录一般位于根目录中
# 但是如果你的结构不同，那你就要根据实际路径修改下面的`:path`
pod 'React', :path => '../node_modules/react-native', :subspecs => [
'Core',
'CxxBridge', # 如果RN版本 >= 0.45则加入此行
'DevSupport', # 如果RN版本 >= 0.43，则需要加入此行才能开启开发者菜单
'RCTText',
'RCTNetwork',
'RCTWebSocket', # 这个模块是用于调试功能的
# 在这里继续添加你所需要的RN模块
]
# 如果你的RN版本 >= 0.42.0，则加入下面这行
pod "Yoga", :path => "../node_modules/react-native/ReactCommon/yoga"
# 如果RN版本 >= 0.45则加入下面三个第三方编译依赖
pod 'DoubleConversion', :podspec => '../node_modules/react-native/third-party-podspecs/DoubleConversion.podspec'
pod 'GLog', :podspec => '../node_modules/react-native/third-party-podspecs/GLog.podspec'
pod 'Folly', :podspec => '../node_modules/react-native/third-party-podspecs/Folly.podspec'
end
第三步安装React Native的pod包
pod install
由于众所周知的网络原因，pod install的过程在国内非常不顺利，请自行配备稳定的翻墙工具，或是尝试一些镜像源。
一般iOS开发人员基本上早就配置好了CocoaPods的，这一步也没问题。
4，创建需要接入的RN代码
由原生OC代码引入RN，预留一个参数接口。具体请查看下面的内容。
这是RN代码的起始文件，由它开始我们的RN之旅。只是为了体验，一般代码不会写在这里的。
import React from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View
} from 'react-native';
class HelloReactNative extends React.Component {
render() {
let contents = this.props["scores"].map(
score => <Text key={score.name}>{score.name}:{score.value}{"\n"}</Text>
);
return (
<View style={styles.container}>
<Text style={styles.title}>
Hello React-Naive!
</Text>
<Text style={styles.scores}>
{contents}
</Text>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#FFFFFF',
},
title: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
scores: {
textAlign: 'center',
color: '#333333',
marginBottom: 5,
},
});
// 整体js模块的名称
AppRegistry.registerComponent('OCToReactNative', () => HelloReactNative);
5，整合
在文件头导入
#import <React/RCTRootView.h>
#import <React/RCTBundleURLProvider.h>
引发原OC代码中的一个事件，使其跳转到RN界面。我以一个触动年月日选择器的SegmentedControl来触发
- (IBAction)changedDateType:(UISegmentedControl *)sender {
if (sender.selectedSegmentIndex == 0) {
// self.timeLabel.text = @"请选择哪一天";
// [self creatDayPickerWithDateString:[self getCurrentTimeWithFormat:@"yyyyMMdd"] referView:sender];
// NSURL *jsCodeLocation = [NSURL URLWithString:@"http://localhost:8081/index.bundle?platform=ios"];
NSURL *jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index" fallbackResource:nil];
RCTRootView *rootView =
[[RCTRootView alloc] initWithBundleURL : jsCodeLocation
moduleName : @"OCToReactNative"
initialProperties :
@{@"scores" : @[@{
@"name" : @"黄沙", @"value": @"1989"
},@{
@"name" : @"百战", @"value": @"1001"
}
]
}
launchOptions: nil];
UIViewController *vc = [[UIViewController alloc] init];
vc.view = rootView;
[self presentViewController:vc animated:YES completion:nil];
} else if (sender.selectedSegmentIndex == 2) {
self.timeLabel.text = @"请选择几月";
[self creatMonthPickerWithDateString:[self getCurrentTimeWithFormat:@"yyyyMM"] referView:sender monthType:ChooseedMonthType_Month];
} else {
self.timeLabel.text = @"请选择第几周";
[self creatWeekPickerWithDateString:[self getCurrentTimeWithFormat:@"yyyyMMdd"] referView:sender];
}
}
6，运行前准备
第一步
<key>NSAppTransportSecurity</key>
<dict>
<key>NSExceptionDomains</key>
<dict>
<key>localhost</key>
<dict>
<key>NSTemporaryExceptionAllowsInsecureHTTPLoads</key>
<true/>
</dict>
</dict>
</dict>
iOS开发人员都懂。在这里是为了iOS项目能够访问本地Packager服务
第二步
运行Packager
npm start
运行该命令，不能报错，如果报错请找出原因解决。
我这边运行的时候有过报错，是没有链接成功，建议参考https://www.npmjs.com/package/rnpm
两行命令
npm i -g rnpm
rnpm link
然后运行项目，可以通过Xcode运行，也可以直接
react-native run-ios
网友评论