集成React Native到现有iOS项目

React Native开发移动客户端App的方式,现在是非常火爆,为什么这么说呢,有人吹,有人黑,人气自然就高咯。为什么有人吹呢?用JavaScript(同时也可以使用Node.js丰富的第三方库)这种世界上使用人最多的语言来开发,学会了这种开发模式,基本就可以同时开发iOS和Android两端的App了,而且可以将js代码部署云端,做到热更新。如果你想做技术热浪中的弄潮儿,不妨也把你现有的iOS项目中集成React Native。

CocoaPods来进行React Native的管理

现在大部分的iOS项目都是通过CocoaPods来进行第三方库依赖的管理,而且使用这种方式集成React Native相对方便一点。

步骤1

创建一个RN的文件夹来放置js代码


Paste_Image.png

步骤2

RN文件下创建package.json文件(npm就是通过这个文件来进行第三库依赖的管理)

{
  "name": "ReactNativeApp",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "node node_modules/react-native/local-cli/cli.js start"
  },
  "dependencies": {
    "react": "15.3.1",
    "react-native": "0.33.0"
  }
}

步骤3

在package.json所在的文件路径执行

npm install

步骤4

创建index.ios.js(即React Native的入口文件)

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View
} from 'react-native';

class ReactNativeApp extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>
          Welcome to React Native!
        </Text>
        <Text style={styles.instructions}>
          To get started, edit index.ios.js
        </Text>
        <Text style={styles.instructions}>
          Press Cmd+R to reload,{'\n'}
          Cmd+D or shake for dev menu
        </Text>
      </View>
    );
  }
}

const 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('ReactNativeApp', () => ReactNativeApp);

检查点

这几个步骤走下来,项目的结构如下


Paste_Image.png

步骤5

使用CocoaPods来将React Native的项目和iOS项目关联起来,其中path是你创建刚刚创建的RN文件夹中的node_modules里的react-native,并且subspecs中指定的库,如果在iOS有用到其他的库还需要在这里指定一下

# Uncomment this line to define a global platform for your project
platform :ios, '9.0'
# Uncomment this line if you're using Swift
# use_frameworks!

pod 'React', :path => './ReactComponent/node_modules/react-native', :subspecs => [
 'Core',
  'ART',
  'RCTActionSheet',
  'RCTAdSupport',
  'RCTGeolocation',
  'RCTImage',
  'RCTNetwork',
  'RCTPushNotification',
  'RCTSettings',
  'RCTText',
  RCTWebSocket',
]
target 'XXXApp' do

end

然后执行一下 pod install

步骤6

iOS端的入口代码

#import "ViewController.h"
#import "RCTBundleURLProvider.h"
#import "RCTRootView.h"

@interface ViewController ()

@property(nonatomic, strong) RCTRootView *rootView;

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    NSURL *jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index.ios" fallbackResource:nil];
    self.rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation
                                                        moduleName:@"ReactNativeApp"
                                                 initialProperties:nil
                                                     launchOptions:nil];
    self.view =self.rootView;
}

@end

其中新版本中,真机测试时也不需要修改server的ip地址了,只要是同一个网段就可以访问到了

步骤7

如果不能连接到js管理的服务器,请修改info.plist

<key>NSAppTransportSecurity</key>
    <dict>
        <key>NSAllowsArbitraryLoads</key>
        <true/>
    </dict>

步骤7

启动服务器, RN文件夹下执行

npm start

步骤8

xcode cmd+R,理论上就可以看到如下图了

Paste_Image.png

如果在最后一步中,一直有红色的错误提示出现,也请google下,千万不要气馁!其实你里成功只差一个坚持二字。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 214,504评论 6 496
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 91,434评论 3 389
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 160,089评论 0 349
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 57,378评论 1 288
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,472评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,506评论 1 292
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,519评论 3 413
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,292评论 0 270
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,738评论 1 307
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,022评论 2 329
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,194评论 1 342
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,873评论 5 338
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,536评论 3 322
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,162评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,413评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,075评论 2 365
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,080评论 2 352

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 171,971评论 25 707
  • 本系列文章作为学习RN期间的总结 React Native如何集成到现有项目中 React Native和Nati...
    董二千阅读 1,208评论 0 0
  • 一座又一座城 有的终日紧锁城门 有的城门终日开着 有的虚掩着在等那有缘人 门里一个世界 门外一个世界 那些城中人 ...
    雪莉诗话阅读 161评论 7 16
  • 春节假期还没有结束,我就和妻子带着小女儿回到了郑州。其实在内心里还是有很多不舍的,毕竟年还没有过完,不舍得离开这个...
    梧_桐_树阅读 250评论 0 0
  • ① 无意间 我打翻了封锁旧时光的匣子 ╮ 我看见了 那是我们曾经幸福的过往 。 像旧电影 在我的脑海一遍一遍重...
    请唤我阿璃君阅读 538评论 0 0