• 在搭建配置了RN的开发环境,然后,本文记录在现有iOS项目集成React Native的过程,官方推荐使用Cocoapods,项目一开始也是使用它,只是有时安装库很慢,还不如复制粘贴库来的快,就删除它了,这里就使用手动集成的...

     在搭建配置了RN的开发环境,然后,本文记录在现有iOS项目集成React Native的过程,官方推荐使用Cocoapods,项目一开始也是使用它,只是有时安装库很慢,还不如复制粘贴库来的快,就删除它了,这里就使用手动集成的方式吧。

      1. 新增React Native文件路径和json说明文件,进入项目根目录(*.xcodeproj文件所在目录):

        mkdir reactnative

        cd reactnative

        vim package.json  : 用于初始化react native

        文件内容为:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    {
        "name""<项目名称>",
        "version""3.0.1612090",
        "private"true,
        "dependencies": {
            "react""^0.14.8",
            "react-native""^0.22.2"
        }
    }

         执行"npm install",会在当前目录(reactnative)生成node_modules子目录,里面包含react-native包含的所有包:

        

        npm install完成:

        

      2. 在reactnative目录下新增index.ios.js文件:

        

      3. 添加React Native依赖包(添加自己需要用的包就可以了):

        1. 添加"React.xcodeproj"项目到现有项目:

          

        2. 添加"RCTNetwork.xcodeproj":

          

        3. 添加"RCTText.xcodeproj":

          

        4. 添加"RCTWebSocket.xcodeproj":

          

        5. 添加"RCTActionSheet.xcodeproj":

          

        添加完后项目结构如下:

        

      4. 添加frameworks:

        

      5. 添加搜索的头文件地址:

        在Header Search Paths增加一行:

        

        增加后如下:

        

      6. 运行,报如下错误:

         在方法前加"(void)"即可,如下:

        还有一个属性访问错误,很简单,修改即可。再次编译,可以了。

      7. 测试react native功能:

        1. 增加View,用来显示react native的文件内容:

          

        2. 实现ReactViewTest.m :

          

        3. 自定义view完成了,编写控制器将其展现出来:

          

      8. 测试运行

        先启动react-native服务端:

        在reactnative目录下执行:"react-native start"

        

        在项目的info.plist增加配置:

        

        这里使用的是真机调试,因此,需要修改localhost为ip地址,且电脑和手机需要连接在同一个网络。

        运行:

        结果如下:

        

        服务端输出如下:

        

        可以看到,每次修改js文件,都是动态更新页面传输到手机上,刷新重新显示即可。

      9. 发布时:

        开发时从服务端获取渲染文件,发布时,就需要将文件打包为main.jsbundle了:

        使用命令”curl http://192.168.1.102:8081/index.ios.bundle -o main.jsbundle“

        

        在项目添加这个文件,修改ReactViewTest:

        

        为了测试效果,关闭react native服务端,运行APP,可以正确从本地加载显示,完成了。

        后面就可以按需继续使用js和原生来混合开发了。

    展开全文
  • 本篇文章记录了在已经创建好的原生项目集成react-native的过程。 一、创建工程 我在桌面创建了一个工程,命名RNTest。 1_1.png 二、添加package.json文件 在RNTest目录下创建一个package.json或者直接从...
  • 亲自操作了一遍,没有大问题。 我在 pod install 的时候,一直 installling ,永远安装不完 ,最终发现,我把 翻墙软件退出 去就好了 ...1.本文的前提条件是,电脑上已经安装了CocoaPods,React
  • 下面有个Demo介绍原生iOS项目是如何与React Native集成的。先贴下React Native中文网是官方教程:[React Native嵌入到现有原生应用](https://reactnative.cn/docs/0.43/integration-with-existing-apps/) ...
  • React Native概念介绍 名词解释 首先列举几个关键词: React Native React Native 这三个词其实没有太大关系,我们逐个来解释: React:近几年Web前端领域非常火热的一个开发框架React.JS,其...
  • React Native支持在其基础上编写原生代码, 具有访问平台所有的能力.在日常开发中,github上很多的RN组件已经满足了大家的使用.如果有不支持你需要的原生特性的需求出现,就需要自己该特性的封装.参考rn中文网.在React ...
  • 将RN集成到现有OC项目应该是最常见的,特别是已经有OC项目的,不太可能会去专门搞个纯RN的项目。又因为RN不同版本,引用的依赖可能不尽相同,所以特别说明下,本文参考的文档是React Native (0.57)相关文档。 一...
  • 浅析React Native的优劣 2019-03-06 07:03:30
    关于React Native React Native 是 FaceBook 2015 年开源的基于React 的 javascript 框架,旨在使用javascript高效开发手机端应用。 目前它在github上已经拥有59000+ 的Star 和 13000+ 的Fork,可见其受追捧的程度。...
  • React Native 充分利用了 Facebook 的现有轮子,是一个很优秀的集成作品,使用 RN 即可做到无需编译就能远程热更新 App,再加上友好的开发方式、快到爆炸的开发效率、RN 已经完爆了其他的 App 开发方式,即使是一个...
  • react native 友盟统计的Android端集成可参考 :https://www.jianshu.com/p/1c41d4b66312 希望大家少走些弯路吧。 下面介绍下IOS 端的集成: 步骤 ios端的sdk集成 ios 和rn 的交互类 工程的相关配置 (初始化sdk)...
  • React Native SDK for OSS 2019-05-01 00:42:06
    此文主要介绍 React Native SDK for OSS的方方面面,包括相关基本概念、项目背景、项目方案、环境搭建运行、使用姿势、注意事项等。文末的附件可运行Example Zip压缩包和针对新手的入门实用文章《从0开始搭建React ...
  • 恰好新版项目中要加入语音播报功能,因为我们的应用和司机有关,于是在网上搜索一些解决方案,目前有阿里云,百度云以及科大讯飞还有一些其他公司提供的相关解决方案。 不同方案之间的对比,可以参考下面的文章: ...
  • ReactNative与iOS的混编 2017-03-01 15:37:45
    ReactNative与iOS的混编 通讯 ReactNative与iOS的通讯 这里头很详细  嵌入 iOS原生调用嵌入ReactNative iOS原生调用嵌入ReactNative(English) 1. cd到项目的根目录下 cd到项目的...
  • React Native编写跨平台APP 2016-04-05 01:00:10
    React Native编写跨平台APP React Native 是一个编写iOS与Android平台实时、原生组件渲染的应用程序的框架。它基于React,Facebook的JavaScript的库,为的是构建用户接口,而并不是以浏览器为目标,它是以手机...
  • Native、Web App、Hybrid、React Native(后面以RN简称)、Weex 间的异同点,后期同步小程序 和 PWA。 App常用开发模式简介 此处App为应用,application,并非我们通常讲的手机App。 常用的几种APP开发模式-脑图...
  • react native 研究 2015-11-25 15:49:04
    一、React Native所做的工作 1)更新DOM   只更新不读取。  2)响应事件   响应事件,状态变化,告知渲染。  二、React Native的优点与缺点 1、优点:   1)最后生成原生应用,交互和性能...
  • 本文介绍了在使用 React Native 开发过程中,如何对无限列表组件进行技术选型,如RecyclerListView组件对无限列表进行性能优化,如何解决无限列表与标签页搭配使用时的内存优化与手势重叠的问题,希望对大家有所启发...
  • RN 与native 的交互 0>>> React 的渲染機制 1>>> react-native 渲染原理 2>>> react-native 如何与原生通信 3>>> 如何封装一个原生视图组件 4>>> react-native ...
  • React-Native安卓预加载优化方案转载https://ivweb.io/topic/5958de8b1eb29e24e8a098a4本文针对使用React Native开发混合应用的过程中安卓端白屏时间较长的问题,提出了react-native安卓端RootView预加载优化方案,...
  • 专注于新技术的研发,主要负责 App 端组件化架构以及性能优化,并已推广 React Native 在 58 同城 App 中业务场景的应用。在 MDCC 2016 iOS 开发峰会上分享《58 同城 App 在 React Native 上的开发实践-iOS 视角》...
1 2 3 4 5 ... 20
收藏数 464
精华内容 185