1.安装JavaScript依赖包
用终端进入到IOS原生项目根目录下,创建package.json文件(输入touch package.json)
打开package.json文件,在文件中写入以下内容:
{ "name": "MyReactNativeApp", "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" } }接下来使用npm(node包管理器,Node package manager)来安装React和React Native模块。 请打开一个终端/命令提示行,进入到项目目录中(即包含有package.json文件的目录),然后运行下列命令来安装:
$ npm install
2.安装CocoaPods
CocoaPods是针对iOS和Mac开发的包管理工具。我们用它来把React Native框架的代码下载下来并添加到你当前的项目中。 我们建议使用Homebrew来安装CocoaPods。
$ brew install cocoapods
3.配置CocoaPods的依赖
React Native框架整体是作为node模块安装到项目中的。下一步我们需要在CocoaPods的Podfile中指定我们所需要使用的组件。在你开始把React Native集成到你的应用中之前,首先要决定具体整合的是React Native框架中的哪些部分。而这就是subspec要做的工作。在创建Podfile文件的时候,需要指定具体安装哪些React Native的依赖库。所指定的每一个库就称为一个subspec。
可用的subspec都列在node_modules/react-native/React.podspec中,基本都是按其功能命名的。一般来说你首先需要添加Core,这一subspec包含了必须的AppRegistry、StyleSheet、View以及其他的一些React Native核心库。如果你想使用React Native的Text库(即<Text>组件),那就需要添加RCTText的subspec。同理,Image需要加入RCTImage,等等。
我们需要在Podfile文件中指定所需的subspec。创建Podfile的最简单的方式就是在项目根目录中使用CocoaPods的init命令:
$ pod initPodfile会创建在执行命令的目录中。你需要调整其内容以满足你的集成需求。调整后的Podfile的内容看起来类似下面这样:
platform :ios, '8.0' #手机的系统 target 'MyApp' do #工程名字 pod 'React', :path => './node_modules/react-native', :subspecs => [ 'Core', 'ART', 'RCTActionSheet', 'RCTGeolocation', 'RCTImage', 'RCTNetwork', 'RCTPushNotification', 'RCTSettings', 'RCTText', 'RCTVibration', 'RCTWebSocket', 'RCTLinkingIOS' # 在这里继续添加你所需要的RN模块 ] # 如果你的RN版本 >= 0.42.0,则加入下面这行 pod "Yoga", :path => "./node_modules/react-native/ReactCommon/yoga" target 'MyAppTests' do inherit! :search_paths # Pods for testing end target 'MyAppUITests' do inherit! :search_paths # Pods for testing end end
创建好了Podfile后,就可以开始安装React Native的pod包了。
$ pod install
注意:pod install的过程在国内非常不顺利,请自行配备稳定的翻墙工具,或是尝试一些镜像源。
出现如下信息代表安装成功
Analyzing dependencies Fetching podspec for `React` from `./node_modules/react-native` Fetching podspec for `Yoga` from `./node_modules/react-native/ReactCommon/yoga` Downloading dependencies Installing React (0.44.3) Installing Yoga (0.44.3.React) Generating Pods project Integrating client project Sending stats Pod installation complete! There are 14 dependencies from the Podfile and 3 total pods installed.
4.创建index.ios.js文件(注意在0.49版本之后是index.js文件)
import React from 'react'; import { AppRegistry, StyleSheet, Text, View } from 'react-native'; class RNIndex extends React.Component { render() { return ( <View style={styles.container}> <Text style={styles.text}> React Native </Text> </View> ); } } const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: '#FFFFFF', }, text: { fontSize: 20, textAlign: 'center', margin: 10, }, }); // 整体js模块的名称 AppRegistry.registerComponent('MyRNApp', () => RNIndex);
5.编写从原生界面进入RN界面的代码
注意引入
RCTRootView
在原生视图中编写一个按钮,用来跳转到RN界面
#import "ViewController.h" #import <React/RCTRootView.h> @interface ViewController () @end @implementation ViewController - (void)viewDidLoad { [super viewDidLoad]; // Do any additional setup after loading the view, typically from a nib. UIButton *btn = [[UIButton alloc] init]; btn.frame = CGRectMake(50, 50,120, 30); btn.backgroundColor = [UIColor grayColor]; [btn setTitle:@"ReactNative" forState:UIControlStateNormal]; [btn addTarget:self action:@selector(enterRn:) forControlEvents:UIControlEventTouchUpInside]; [self.view addSubview:btn]; } -(void)enterRn:(UIButton *) button{ NSURL *jsCodeLocation = [NSURL URLWithString:@"http://127.0.0.1:8081/index.ios.bundle?platform=ios&dev=true"]; //注意这里的 MyRNApp 必须对应“index.ios.js”中的“AppRegistry.registerComponent()”的第一个参数 RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation moduleName:@"MyRNApp" initialProperties:nil launchOptions:nil]; rootView.backgroundColor = [UIColor colorWithRed:(36) green:(34) blue:(CGFloat)34 alpha:(1)]; UIViewController *vc = [[UIViewController alloc] init]; vc.view = rootView; [self presentViewController:vc animated:YES completion:nil]; } - (void)didReceiveMemoryWarning { [super didReceiveMemoryWarning]; // Dispose of any resources that can be recreated. } @end
6.添加App Transport Security例外
Apple现在默认会阻止读取不安全的HTTP链接。所以我们需要把本地运行的Packager服务添加到Info.plist的例外中,以便能正常访问Packager服务:<key>NSAppTransportSecurity</key> <dict> <key>NSExceptionDomains</key> <dict> <key>localhost</key> <dict> <key>NSTemporaryExceptionAllowsInsecureHTTPLoads</key> <true/> </dict> </dict> </dict>
7.测试集成结果
运行packager
在项目的根目录下输入
npm start
然后再xcode中运行你的项目
注意,在用cocopods集成了ReactNative之后,从此之后应该打开 项目名称.xcworkspace文件以运行项目,而不是之前的项目名称.xcodeproj文件。