iOS在原生项目中插入React Native(最终版)

最新推荐文章于 2024-05-30 00:23:17 发布

原创

最新推荐文章于 2024-05-30 00:23:17 发布 · 3.1k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#ios #native

本文提供详尽步骤教你如何在已有的iOS原生项目中集成React Native。内容涵盖创建package.json，安装node_modules，配置podfile，创建index.ios.js，以及将React Native组件导入并启动服务器。

如果你在找在原生项目中插入react native的教程，那么这将是你最后查找的教程。O(∩_∩)O

本文的前提是电脑已经安装过React-Native相关环境和cocoapods。
STEP 1 安装node_modules包

创建package.json文件在项目的根目录下，这是为工程添加依赖库。里面有工程的版本信息和所需要的依赖库，第三方库等
例子如下

{
  "name": "YourProjectName",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "node node_modules/react-native/local-cli/cli.js start"
  },
  //所需要的库
  "dependencies": {
    "react": "15.2.1",
    "react-native":

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

passionhe

关注关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

iOS React Native 混合开发集成React Native

m0_70646869的博客

05-10

539

/** Sample React Native App https://github.com/facebook/react-native @flow */ import React, { Component } from ‘react’; import { AppRegistry, StyleSheet, Text, View } from ‘react-native’; export default class RNHybrid extends Component { render() {

最新iOS原生项目集成React-Native

leftlee

10-26

3776

大楼不是一天所建成，是时间慢慢积累起来滴，原先用原生写的项目，没办法将项目中所有的代码都换成RN，而且我也不认为全换成RN就是好的，所以准备先将项目中的一些页面改成RN开发。由于我们并没有使用Cocoapods，因为Cocoapods管理第三方依赖的时候会自动创建一些目录，不便整个团队的管理。本篇文章记录了在已经创建好的原生项目上集成react-native的过程。前提：电脑已经安装过Re

1 条评论您还未登录，请先登录后发表或查看评论

React Native 集成到iOS原有的项目上

lyz0925的博客

07-01

3360

需要注意的是，官方有个提示了一个注意事项，如下： 4.4 代码集成 4.4.1 创建一个 index.js 文件 4.4.2 在index.js中添加你自己的 React Native 代码 4.4.3 在iOS项目添加交互的代码上述的代码中，还需要在iOS项目中，添加一个（可以随便取名字）类： 4.4 设置info.plist, 添加 App Transport Security 例外 4.5 开启服务 4.6 在xcode执行代码打开xcode，如果按住执行项目。

在现有的原生应用中嵌入React Native页面(ios版)

weixin_33811539的博客

10-16

277

通常情况下我们有两种方式来构建一个使用RN技术的应用： RN包原生。应用入口由RN控制，页面跳转逻辑也由RN主导，当涉及做原生增强时使用RN的API构建一些原生的模块并暴露出来给RN调用。原生包RN。应用入口由原生代码控制，页面跳转逻辑由原生主导。某些跨平台业务逻辑页面由RN开发。充分利用RN的跨平台特性，较少原生开发的巨大成本。 ...

ReactNative集成到已有iOS项目

Care iOS技术团队

05-30

1333

最近在维护一个项目，需要引入ReactNative开发新UI。记录一下过程，表示我搞过。需要安装node环境接着创建一个目录用来保存工程文件，并在目录项目下面创建一个package.json文件加下来安装react native必须的库, 0.71.7版本是支持xcode14.2的，大于这个版本就需要xcode14.3了，我的电脑是MBP 2015 Mid，只能升级到xcode14.2，所以也只能用这个react-native版本。

iOS原生项目中集成React-Native.zip

08-29

集成的目的是为了能够在既有的iOS原生项目中，引入React-Native组件或模块，从而实现原生与混合开发的无缝衔接。这不仅可以提高应用性能，而且能够充分利用React-Native丰富的组件库，减少开发工作量。在进行iOS...

iOS原生项目中集成React-Native(1).zip

08-29

iOS原生项目与React-Native集成技术是移动应用开发领域一个重要的技术实践，它允许开发者在现有的iOS原生应用中嵌入React-Native编写的模块，充分利用React-Native的跨平台优势和动态更新能力，同时保持iOS原生应用...

iOS原生项目嵌入ReactNative.zip

08-29

集成完成后，需要在原生项目中配置桥接文件（如RCTBridgeModule），这使得React Native可以与iOS原生代码进行通信。在项目结构中，原生项目和React Native项目通常以模块的形式相互调用。React Native部分作为原生...

iOS原生项目集成React-Native指南.zip

最新发布

08-29

集成React-Native到iOS原生项目中，首先需要在原生项目中引入React-Native框架。这通常涉及创建一个新的React-Native项目，并将React-Native的依赖项以及生成的JavaScript代码集成到iOS项目中。项目中的原生代码和...

React Native 嵌入到iOS原生应用

岁月静好，善待时光。

05-03

1002

如果你正准备从头开始制作一个新的应用，那么React Native会是个非常好的选择。但如果你只想给现有的原生应用中添加一两个视图或是业务流程，React Native也同样不在话下。只需简单几步，你就可以给原有应用加上新的基于React Native的特性、画面和视图等。把React Native组件植入到iOS应用中有如下几个主要步骤：首先当然要了解你要植入的React Native组件。创

React-Native踩坑之路:react-native原生组件封装(iOS)

NextChampion的博客

11-30

3505

解除rn以后一直在参考中文网文档学习,但是文档中的代码经常都是代码片段,学习过程里,经常会出现各种各样问题.今天研究了一下文档中Native UI Components (原生UI组件)这一部分.把踩坑过程整理一遍,一方面加深记忆,另一方面也给大家提供一下学习参考. 整体流程(参考中文网文档流程) 1 新建rn空项目.2 xcode内新建ZCXMapManager(RCTMapManage因已经存在

现有iOS项目集成React Native过程记录

weixin_30546189的博客

12-21

275

　　在《Mac系统下React Native环境搭建》配置了RN的开发环境，然后，本文记录在现有iOS项目集成React Native的过程，官方推荐使用Cocoapods，项目一开始也是使用它，只是有时安装库很慢，还不如复制粘贴库来的快，就删除它了，这里就使用手动集成的方式吧。　　1. 新增React Native文件路径和json说明文件，进入项目根目录(*.xcodeproj文件所在目录...

ios原生项目集成react-native过程记录

大灰狼的小绵羊哥哥的博客

07-17

1864

本篇文章记录了在已经创建好的原生项目上集成react-native的过程。一、创建工程我在桌面创建了一个工程，命名RNTest。 1_1.png 二、添加package.json文件在RNTest目录下创建一个package.json或者直接从别的react-native项目中复制过来。 { "name": "RNTest", "version": "0.

React-Native 与IOS集成交互

大灰狼的小绵羊哥哥的博客

07-18

568

在Android原生应用上接入ReactNative实践

陌路旧梦

08-09

406

在Android原生应用上接入ReactNative实践一、安装nodejs, npm. Linux sudo apt install nodejs Mac brew install node 检查安装 node -v npm -v 设置国内淘宝源 npm config set registry https://registry.npm.taobao.org 二、在project工程目录下添加文件package.json,然后执行npm install. 会在工程目录下生成node_modules

ReactNative手动嵌入现有iOS项目(第N篇)

s611533106的专栏

12-20

1474

开发前必须要的有 1.Mac操作系统 2.成功运行过ReactNative项目的 3.创建名为ReactNativeIOS的iOS项目工程 4.在工程对应目录下创建文件夹RNLibrary(名字可以随意,用来存放ReactNative的组件),如下图把对应的文件复制进去 5.打开文件修改index.ios.js文件(对应的类名字要修改成iOS项目名称) import React

React-Native集成到已有项目过程及问题处理

Thinker361的专栏

07-13

2631

先看搞清楚项目目录情况：第一层目录：项目根目录： iOS-2028-master/ 第二层目录：原生项目根目录：iOS-2048-master/NumberTileGame/ 另外假设已经全局安装好node、npm、cocoapods、react-native cli等工具，这些工具没有安装的，请先自行Google安装。Packages Installation 进入项目根目录 iOS

React Native嵌入ios项目集成(坑点)方略

江苏小白龙

03-27

697

第一步安装cocoapods mac自带ruby如果版本低了跟新一下 ruby —version(两个- -) sudo gem install cocoapods 第二步添加package.json文件 cd到ios工程目录中执行 vim package.json然后编辑一下 name:为项目名称根据自己的改一下 { "name": "RNTest", "version"...

React Native嵌入Android原生项目中

Cokernut的专栏

11-25

7739

开发环境准备首先你要搭建好React Native for Android开发环境，没有搭建好的可以参考：React Native for Android Windows环境搭建用Android Studio新建Android原生项目我创建了一个名叫ReactNativeDemo的原生项目。把React Native集成到原生项目当中利用Windows命令行在项目根目录(ReactNative

iOS原生与React Native交互实例：左滑删除功能与中转视图实现

本文档深入探讨了iOS原生与React Native之间的交互示例代码，特别是针对如何实现在React Native应用中实现类似iOS原生表格左滑删除功能的问题。通常，React Native的ListView组件存在复用问题以及对某些复杂功能（如...