专栏首页正则cocoa pods 导入react native  (应用于现有项目中使用rn)
原创

cocoa pods 导入react native  (应用于现有项目中使用rn)

1.项目导入cocoapods

2.在RN中文网下载最新RN包

3.将其工程中的node_modules复制到你的工程根目录下

4.在podfile 中加入以下带代码:

pod 'React', :path => './node_modules/react-native', :subspecs => [

'Core',

'RCTImage',

'RCTNetwork',

'RCTText',

'RCTWebSocket',

]

5.使用终端进入工程根目录pod update —no-repo-update

6.修改plist文件 app transport security http协议(访问js文件必须的)

App Transport Security Settings - Exception Domains-localhost-NSTemporaryExceptionAllowsInsecureHTTPLoads设置为yes

7.创建js文件放入根目录下的ReactComponent文件夹(可自定义,如需修改请同时修改第八条)

7.1 build setting-search paths -header search paths添加   "${PODS_ROOT}/Headers/Public”   "${PODS_ROOT}/Headers/Public/React"  

(改成recursive)

8.终端修改JS读取路径并开启服务  (首先cd 到项目文件夹下)

(JS_DIR= `pwd` /ReactComponent; cd node_modules/react-native; npm run start -- --root $JS_DIR)

注:ReactComponent为读取index.ios.js文件的路径

备注:每次运行均为手动打开服务器

9.运行Xcode上的程序

备注 :测试使用

NSURL *jsCodeLocation = [NSURL URLWithString:@"http://localhost:8081/ReactComponent/index.ios.bundle?platform=ios&dev=true"];

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

moduleName:@"RN"

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];

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • RN同构系列:现有的IOS APP如何集成RN

    react-native 大家都比较熟悉了,如果是一个全新的项目,直接使用 RN 的脚手架功能初始化项目就可以,直到上架之前,前端的小伙伴可能都不怎么需要关心 ...

    腾讯IVWEB团队
  • 新版React Native 混合开发(iOS篇)

    在React Native的应用场景中,有时候一个APP只有部分页面是由React Native实现的,比如:我们常用的携程App,它的首页下的很多模块都是由R...

    CrazyCodeBoy
  • React Native 混合开发(iOS篇)

    在React Native的应用场景中,有时候一个APP只有部分页面是由React Native实现的,比如:我们常用的携程App,它的首页下的很多模块都是由R...

    CrazyCodeBoy
  • 新版React Native 混合开发(Android篇)

    在React Native的应用场景中,有时候一个APP只有部分页面是由React Native实现的,比如:我们常用的携程App,它的首页下的很多模块都是由R...

    CrazyCodeBoy
  • React Native 混合开发(Android篇)

    在React Native的应用场景中,有时候一个APP只有部分页面是由React Native实现的,比如:我们常用的携程App,它的首页下的很多模块都是由R...

    CrazyCodeBoy
  • Swift开发React Native组件

    前面说过,React Native作为一个全新的跨平台开发框架,好多东西还不是很成熟,很多原生的控件还不是很完善,于是好多爱好者便自己封装相关的组件,可以使用o...

    xiangzhihong
  • 小记React Native与原生通信(iOS端)

    emmm…… 先说个题外话,时隔一年,再遇RN,较之以前唯一不同的一点就是遇到的坑终于有人先踩了?本文会通过原生与RN页面相互跳转、方法间的相互调用、以及H5页...

    谦谦君子修罗刀
  • React Native 音频录制例子来解惑入门

    用户1130025
  • UI前端同学回来抢经验,react native开发实战五部曲的实战与锤炼,咬牙学完保证变大牛!

    背景 现在很多移动项目全都专项纯rn开发,对于rn的应用趋势不言而喻,学习一些rn的语法并不是十分困难,但是如何在项目中灵活运用,增加实战项目经验,这还是比较困...

    企鹅号小编
  • 干货 | 终于来了!携程开源RN开发框架 - CRN

    赵辛贵,携程无线平台研发部开发总监。2013年加入携程,主要负责App基础框架研发相关工作,曾参与Native、Hybrid和React Native框架设计、...

    携程技术
  • Taro3.2 适配 React Native 之运行时架构详解

    由 58 前端团队主导的 Taro 3 适配 React Native 工作已完成有一段时间了。目前发布了多个体验版,也将在3月底迎来正式版。基于 Taro 的...

    PHP开发工程师
  • RN集成到现有原生应用-swift

    创建一个空文件夹命名为你RN项目名称,在里面再新建一个文件夹/ios,把你现有的swift项目全部拷贝到/ios文件夹内。

    用户6094182
  • React-Native 通用化建设与性能优化

    本文主要介绍 react-native通用化建设以及对 react-native项目进行性能优化的方案,总体来讲主要围绕以下四个方面展开:通用化建设、本地分包、...

    腾讯IVWEB团队
  • React Native初探--从安装运行首个app到填坑指南

    好多人说rn好用,一直要推荐我用,我就不信了,来安装玩一下试试效果。实践出真知!安装过程各种坑,工具太多了,太麻烦了,差点放弃(还好坚持下来呢)。

    AWeiLoveAndroid
  • React Native聊天app实例|RN版聊天室

    RN原生app聊天应用RN_chatRoom,基于react-native+react-navigation+react+redux+react-native-...

    andy2018
  • React Native 系列(三) -- 项目结构介绍

    Scott_Mr
  • iOS React Native 混合开发集成React Native

       有时候我们并不是需要全部使用React Native,我们想和原生混合开发,那我们应该怎么办呢。

    ZY_FlyWay
  • React-Native转小程序调研报告:Taro & Alita

    底线是能转成微信小程序,因为目前来说,因为微信先发制人,再加上微信本身的用户黏性,导致在小程序这一块大多数其他平台都难以迎头赶上,包括支付宝小程序,百度小程序,...

    啦啦啦321
  • React Native备课笔记Day01一、React Native介绍二、特点分析三、推荐网站以及运行第一个react native项目四、环境搭建五、React Native文件结构六、View

    (本节包括React Native介绍、特点分析、环境搭建、RN文件结构、View组件讲解、FlexBox布局及props与state) 一、React Nat...

    谦谦君子修罗刀

扫码关注云+社区

领取腾讯云代金券