https://reactnative.cn/docs/integration-with-existing-apps/

1、创建一个xcode工程,single View就行,项目语言选择swift,oc的直接生成就行不用这么麻烦。
2、把跟目录上创建 node的package.json,执行命令

npm init
npm install react-native --save-dev
npm install react --save-dev
 
3、创建podfile文件,然后执行pod install ,必须第二步完成。代码如下:

# Uncomment the next line to define a global platform for your project
# platform :ios, '9.0'

target 'demo1' do
  # Comment the next line if you're not using Swift and don't want to use dynamic frameworks
  use_frameworks!

  pod 'DoubleConversion', :podspec => './node_modules/react-native/third-party-podspecs/DoubleConversion.podspec'
  pod 'glog', :podspec => './node_modules/react-native/third-party-podspecs/GLog.podspec'
  pod 'Folly', :podspec => './node_modules/react-native/third-party-podspecs/Folly.podspec'

  pod 'React', :path => './node_modules/react-native', :subspecs =>  [
  'Core',
  'DevSupport',
  'RCTText',
  'RCTNetwork',
  'RCTWebSocket',
  'CxxBridge'
  ]

  # 如果你的RN版本 >= 0.42.0,请加入下面这行
  pod "yoga", :path => "./node_modules/react-native/ReactCommon/yoga"

end

执行npm start 启动服务

运行项目  

出现如下错误

查了下资料 需要修改

在info.plist中添加 AppTransport Security Settings 在其下再添加 Allow Arbitrary Loads选择为 yes,修改网络可以使用http请求。

运行正常

ok,  新建Swift工程,配合Cocoapods 构建react-native项目就完成了。

demo地址

https://github.com/youhui/react-native-cocoapods-swift-project

react-native-Cocoapods-Swift-Project的更多相关文章

  1. react native与现有的应用程序集成

    (1)通过cocopods 集成 ,以下内容 参考 http://wiki.jikexueyuan.com/project/react-native/integration-existing.html ...

  2. Flipper & React Native

    Flipper & React Native Flipper Flipper是一款用于调试移动应用程序的出色开发人员工具,在Android和iOS社区中颇受欢迎. Flipper is a g ...

  3. iOS、swift、React Native学习常用的社区、论坛

    <!----iOS> <!----Swift>*IOS开发常用社区:http://code4app.com/ *IOS开发常用社区:http://www.cocoachina. ...

  4. Swift Modules for React Native

    React Native is an Objective-C application framework that bridges JavaScript applications running in ...

  5. react native 0.50与OC交互 && Swift与RN交互

    新公司也打算做rn,还是得捡起来再度学习.开撸! react native一个版本一个样子,之前写的rn与iOS交互系列在最新版本中有点出入(0.50.4版本).今天填一下坑. 首先上npm版本,re ...

  6. Kotlin & Android & Swift & Flutter & React Native

    Kotlin & Android https://www.runoob.com/kotlin/kotlin-tutorial.html Swift 5 & iOS 12 https:/ ...

  7. React native 无法弹出调试控件的问题

    React Native 在debug模式下,可以通过摇动手机,弹出调试选项.但是今天利用了cocoapods 把react native 文件整理后,调试界面就弹不出了,其他功能正常.查了好久,发现 ...

  8. Xamarin vs React Native vs Ionic vs NativeScript: Cross-platform Mobile Frameworks Comparison

    CONTENTS Reading time: 14 minutes Cross-platform mobile development has long been a viable alternati ...

  9. 【独家】React Native 版本升级指南

    前言 React Native 作为一款跨端框架,有一个最让人头疼的问题,那就是版本更新.尤其是遇到大版本更新,JavaScript.iOS 和 Android 三端的配置构建文件都有非常大的变动,有 ...

  10. React Native:使用 JavaScript 构建原生应用

    [转载] 本篇为联合翻译,译者:寸志,范洪春,kmokidd,姜天意 数月前,Facebook 对外宣布了正在开发的 React Native 框架,这个框架允许你使用 JavaScript 开发原生 ...

随机推荐

  1. CF1119B Alyona and a Narrow Fridge

    题目地址:CF1119B Alyona and a Narrow Fridge \(O(n^2)\) 暴力枚举+贪心 从小到大枚举答案 假设枚举到 \(i\) ,将 \(a_1\) 到 \(a_i\) ...

  2. Python 爬虫 当当网图书 scrapy

    目标站点需求分析 获取当当网每个图书名字和评论数 涉及的库 scrapy,mysql 获取解析单页源码 保存到数据库中 结果

  3. Vue项目中使用webpack配置了别名,引入的时候报错

    chainWebpack(config) { config.resolve.alias .set('@', resolve('src')) .set('assets', resolve('src/as ...

  4. PID控制器开发笔记之十三:单神经元PID控制器的实现

    神经网络是模拟人脑思维方式的数学模型.神经网络是智能控制的一个重要分支,人们针对控制过程提供了各种实现方式,在本节我们主要讨论一下采用单神经元实现PID控制器的方式. 1.单神经元的基本原理 单神经元 ...

  5. Common Vulnerability Scoring System CVSS

    1.Generating a Shell payload using msfvenom 2.web intrusion Test in fact in the websecurity ,the web ...

  6. ycmd for emacs 代码自动补全

    YCMD FOR EMACS Table of Contents 1. 安装 1.1. 下载 1.2. 安装相关依赖 1.3. 更新submodules 1.4. 安装 2. 配置 1 安装   1. ...

  7. 利用远程服务器在docker容器搭建pyspider运行时出错的问题

    This system supports the C.UTF-8 locale which is recommended. You might be able to resolve your issu ...

  8. RedisHelper帮助类

    using Newtonsoft.Json; using RedLockNet.SERedis; using RedLockNet.SERedis.Configuration; using Stack ...

  9. net core 获取配置文件

    IConfiguration服务是net core 默认依懒注入的一个对象 直接注入(推荐使用) 新建控制器 然后构造函数直接注入 [Route("api/[controller]" ...

  10. python 进程间通信(上)

    一  使用queue来实现进程间的内存共享 #_*_coding:utf-8_*_ from multiprocessing import Process,Queue import os,time d ...