iOS原生项目中集成React Native
1.本文的前提条件是,电脑上已经安装了CocoaPods,React Native相关环境。
2.使用Xcode新建一个工程。EmbedRNMeituan
[图1]
3.使用CocoaPods安装React Native
在工程目录下新建Podfile文件,并配置需要使用的第三方库
pod 'React', '0.13.0-rc' pod "React/RCTText" pod "React/RCTActionSheet" pod "React/RCTGeolocation" pod "React/RCTImage" pod "React/RCTLinkingIOS" pod "React/RCTNetwork" pod "React/RCTSettings" pod "React/RCTVibration" pod "React/RCTWebSocket"
注:如果你需要在React Native中使用<Text>,就需要添加 pod"React/RCTText”,否则不能用
然后安装: pod install
这一步会比较慢
安装完成后,添加 Search Paths
输入$(PODS_ROOT),选择recursive
【图2】
编译一下,会报一个错,提示路径太长
Argument list too long: recursive header expansion failed at /Users/***/EmbedRNMeituan/Pods/React/node_modules/jest-cli/node_modules/istanbul/node_modules/escodegen/node_modules/estraverse.
这里需要修改刚才的设置,将 $(PODS_ROOT) 改成 $(PODS_ROOT)/React/React
再次编译,成功。
4.在工程目录下新建Components文件夹,和index.ios.js文件
【图3】
并在index.ios.js文件里粘贴一下代码:
'use strict'; var React = require('react-native'); var { AppRegistry, StyleSheet, Text, View, } = React; var EmbedRNMeituan = React.createClass({ render: function() { return ( <View style={styles.container}> <Text style={styles.welcome}> Welcome to React Native! </Text> <Text style={styles.instructions}> To get started, edit index.android.js </Text> <Text style={styles.instructions}> Shake or press menu button for dev menu </Text> </View> ); } }); var styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: '#F5FCFF', }, welcome: { fontSize: 20, textAlign: 'center', margin: 10, }, instructions: { textAlign: 'center', color: '#333333', marginBottom: 5, }, }); AppRegistry.registerComponent('EmbedRNMeituan', () => EmbedRNMeituan);
以上,React Native部分已经弄完。下面开始原生部分。
5.新建显示React Native的UIView。
用来加载显示React Native的容器是 RCTRootView,它是继承自UIView。
在ViewController.m中
#import "RCTRootView.h" - (void)viewDidLoad { [super viewDidLoad]; // Do any additional setup after loading the view, typically from a nib. [self initRNView]; } -(void)initRNView { NSURL *jsCodeLocation; jsCodeLocation = [NSURL URLWithString:@"http://localhost:8081/index.ios.bundle?platform=ios&dev=true"]; RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation moduleName:@"EmbedRNMeituan" initialProperties:nil launchOptions:nil]; //注意,这里是 @"EmbedRNMeituan" rootView.frame = CGRectMake(0, 64, 300, 300); [self.view addSubview:rootView]; }
6.运行
此时如果运行的话,会出现下面的情况
【图4】
提示找不到服务器,以及数据传输的安全问题。
6.1允许http请求
打开info.plist文件,添加
【图5】
App Transport Security Settings -》 Dictionary
Allow Arbitrary Loads -》 YES
6.2启动服务器
工程目录下,终端输入:
(cd Pods/React; npm run start)
6.3编写脚本文件run.sh
vi run.sh
输入
#! /bin/bash
(cd Pods/React; npm run start)
然后给run.sh添加可执行权限:chmod +x run.sh
之后开启服务器时,只需要在终端输入命令: ./run.sh
链接: