React Native移植iOS原生项目

手工集成React Native

第一步：初始化React Native环境

在我们要集成的项目中，进入到*.xcodeproj文件的上级目录，运行React Native初始化命令react-native init [Project Name]
会出现prompt, 输入yes,这样会在ios目录下生成一个同名工程。init过程会需要一点时间，耐心等待。


完成后项目文件目录会变成这样：

  • node_modules:react native依赖包
  • ios:iOS项目相关代码，Xcode工程文件
  • android:Android项目相关代码
  • index.ios.js:iOS平台加载的JS脚本
  • index.android.js：Android平台加载的JS脚本
  • package.json：当前项目的npm package的配置文件，内容如下：

?


1

{ "private": true, "scripts": { "start": "node node_modules/react-native/local-cli/cli.js start" }, "name": "Project", "dependencies": { "react": "^15.1.0", "react-native": "^0.27.2" }, "version": "0.0.1" }

接下来，我们可以先把Android相关的文件给干掉：

  • android
  • index.android.js
  • node_modules/react-native/android
  • node_modules/react-native/ReactAndroid
第二步：添加React Native的Libraries

打开ios目录下的那个同名工程，可以看到这个工程引用的React Native库如下：


打开我们原有的项目，右键工程目录，选择New Group,新建一个名为Libraries的目录
然后把前面项目Libraries下的*.xcodeproj文件全部拖到这个项目的Libraries下，效果跟上图一样。

第三步：添加React Native shell脚本

React Native的iOS项目在编译时会先运行一个shell脚本，其作用有两个：

  • 从Terminal启动了一个Node.js的server用于React Native调试
  • 将React Native的资源文件打包放在编译目录下

具体添加方式：

  • 选择TARGETS的Build Phases界面,点击左上角的+号

  • 选择New Run Script Phase添加一个脚本，并命名为Bundle React Native code and images/li>
  • 把ios下工程中的脚本引用代码复制过来，如下图。注意路径，因为我们的原有的*.xcodeproj文件跟node_modules是在同一个目录下的，所以我们要去掉两个点中的一个点。

第四步：链接.a文件和添加搜索头文件的地址

到这一步，我们就可以干掉ios目录了，然后关闭原有的工程，再重新打开。
在工程的Build Phases界面的Link Binary With Libraries,点击
最下面的+号，可以看到在Workspace下多了很多.a文件，如下图，把它们全部添加进去。

  • 接下来还需要添加React的搜索头文件，在TARGETS->Build Settings->Header Search Paths中添加一条$(SRCROOT)/node_modules/react-native/React,选择recursive,如下图所示。

第五步：编译

我们先编译一下，会发现编译不通过,一堆报错。
原因是我们还没有导入JavaScriptCore库。因为React Native与原生的交互需要依赖于JavaScriptCore.framework。
再次编译，发现可以编译成功了。

测试运行React Native界面

在AppDelegate.m中的didFinishLaunchingWithOptions:方法中添加如下代码：

?


1

2

3

4

5

6

7

8

9

10

11

RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation

                                                      moduleName:@"Project"

                                               initialProperties:nil

                                                   launchOptions:launchOptions];

  rootView.backgroundColor = [[UIColor alloc] initWithRed:1.0f green:1.0f blue:1.0f alpha:1];

  self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds];

  UIViewController *rootViewController = [UIViewController new];

  rootViewController.view = rootView;

  self.window.rootViewController = rootViewController;

  [self.window makeKeyAndVisible];

CMD+R运行，会看到如下界面：

时间： 2024-10-08 11:13:01

React Native移植iOS原生项目的相关文章

react native 使用 iOS 原生 UI 组件

目前 react native 的组件还是不多,有些也并不怎么好用,这时候就需要封装原生 UI 组件了 之前写过RN 与 native 的通信 无非就是两种: 1>>>  react native 内部事件需要通知 native 调用 native 的方法(或者传递RN 中的数据到 native),这时候可以用新建一个 manager 之类的文件 RCT_EXPORT_MOUDLE() 暴露 native类  ,RCT_EXPORT_METHOD () 暴露 native 方法给 js

React Native嵌入Android原生应用中

开发环境准备 首先你要搭建好React Native for Android开发环境, 没有搭建好的可以参考:React Native for Android Windows环境搭建 用Android Studio新建Android原生项目 我创建了一个名叫ReactNativeDemo的原生项目. 把React Native集成到原生项目当中 利用Windows命令行在项目根目录(ReactNativeDemo文件夹)下执行下面三行命令: npm init npm install –save

【React Native开发】React Native移植原生Android项目

转载请标明出处: http://blog.csdn.net/developer_jiangqq/article/details/50519677 本文出自:[江清清的博客] (一)前言 [好消息]个人网站已经上线运行,后面博客以及技术干货等精彩文章会同步更新,请大家关注收藏:http://www.lcode.org 前三节课程我们已经对于React Native For Android的环境搭建,IDE安装配置以及应用运行,调试相关的知识点做了讲解.今天我们来讲一个非常有用的知识点.移植我们已有

React Native的iOS开发步骤以及崩溃收集

React Native的iOS开发以及崩溃收集 简介 React Native使你能够在Javascript和React的基础上获得完全一致的开发体验,构建世界一流的原生APP. React Native着力于提高多平台开发的开发效率 -- 仅需学习一次,编写任何平台.(Learn once, write anywhere) Facebook已经在多项产品中使用了React Native,并且将持续地投入建设React Native. 准备 安装 iOS只能MAC下开发,需要Xcode; An

超详细Windows版本编译运行React Native官方实例UIExplorer项目(多图慎入)

转载请标明出处: http://blog.csdn.net/developer_jiangqq/article/details/50661981 本文出自:[江清清的博客] (一)前言 特别说明:群里很多童鞋都在说想Windows系统官方实例,但是官方提供的文档以及网上的例子都是OS X版本.今天特意给大家更新一下Windows版本运行官方 实例(UIExporler)全过程.俗话说学习一样新东西的时候,例如这边我们要学React Native的组件使用,那么最好的学习资料就是官方提供的材料了,

【React Native】在原生和React Native间通信

一.从React Native中调用原生方法(原生模块) 原生模块是JS中也可以使用的Objective-C类.一般来说这样的每一个模块的实例都是在每一次通过JS bridge通信时创建的.他们可以导出任意的函数和常量给React Native.相关细节可以参阅这篇文章. 在React Native中,一个“原生模块”就是一个实现了“RCTBridgeModule”协议的Objective-C类,其中RCT是ReaCT的缩写. // CalendarManager.h #import <Reac

React Native—集成到原生Android项目

目前的react-native版本是0.57.8,參考了一些文章之後,終於集成好了.React Native環境的搭建我就不説了,詳細的可以參考React Native中文網的搭建文檔. 創建新的Android工程 環境配置好之後(sdk下載可能比較慢),用Android Studio創建一個Empty Activity的項目. 集成React Native 安裝相關依賴 在項目根目錄下執行 npm init 命令,生成 package.json 文件.此時要注意一下package name和入

react native 开发IOS

转载自kaich blog(http://www.kaich.xyz) 接触 react native 对于技术,我比较喜欢追新.看到报道大名鼎鼎的facebook(开源界的模范,发布了很多高质量的开源框架)开源了移动端跨平台的新框架react native,于是就迫不及待的开始接触它了.react native的目的是为了让前端开发任务能开发移动端(ios程序员相对于web端来说要少得多),于是就有了这样的框架.对于我们IOS程序员有没有必要去学它,看到它另外一个特性:跨平台,而且又一定程度的

React Native 与iOS的通信

RN可以很好的与原生进行交互,我们首先看看效果吧: 首先我们来看看React Native 怎样调用iOS的代码并且带有简单的参数: 在iOS工程里面我们新建一个类iOSExport,iOSExport将会实现RCTBridgeModule协议. 首先我们要在iOSExport类的实现中添加这句宏定义:RCT_EXPORT_MODULE() RCT_EXPORT_MODULE()如果你不传入参数,那么你在iOS中导出的模块名就是类名,你也可以插入参数作为自定义模块名. @implementati