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

1.安装好ReactNative开发环境

2.安装好CocoaPods

3.创建项目根文件夹:A

4.创建文件夹A/ios

5.创建新项目到A/ios目录下(最上层目录移除,否则下面的路径需要修改,例如原来为ProjectDir/ProjectDir,但是根目录ProjectDir下只有一个文件夹,那么最上层移除,只要下一层包含项目数据文件的ProjectDir拷贝到A/ios文件夹下面即可)

6.根目录A下创建package.json和index.js(老版本index.ios.js)文件

  1. {
  2. "name": "MyReactNativeApp",
  3. "version": "0.0.1",
  4. "private": true,
  5. "scripts": {
  6. "start": "node node_modules/react-native/local-cli/cli.js start"
  7. }
  8. }

7.根目录A下执行$ yarn add react-native集成(以下两条命令是可以用npm替换yarn,如果网络问题出错如此)

8.控制台打印可能会出现警告类似warning "react-native@0.52.2" has unmet peer dependency "react@x.y.z".

此时安装指定版本React $ yarn add react@x.y.z

8.添加CocoaPods到iOS项目中

$ pod init

9.配置Podfile文件

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

target 'MyReactNativeApp' do
# Uncomment the next line if you're using Swift or would like to use dynamic frameworks
# use_frameworks!

# Pods for MyReactNativeApp

# 'node_modules'目录一般位于根目录中
# 但是如果你的结构不同,那你就要根据实际路径修改下面的`:path`
pod 'React', :path => '../node_modules/react-native', :subspecs => [
'Core',
'CxxBridge', # 如果RN版本 >= 0.47则加入此行
'DevSupport', # 如果RN版本 >= 0.43,则需要加入此行才能开启开发者菜单
'RCTText',
'RCTImage',
'RCTNetwork',
'RCTWebSocket', # 调试功能需要此模块
'RCTAnimation', # FlatList和原生动画功能需要此模块
# 在这里继续添加你所需要的其他RN模块
#'ART',
#'RCTActionSheet',
#'RCTAdSupport',
#'RCTCameraRoll',
#'RCTGeolocation',
#'RCTPushNotification',
#'RCTSettings',
#'RCTVibration',
#'RCTLinkingIOS',
]
# 如果你的RN版本 >= 0.42.0,则加入下面这行
pod 'yoga', :path => '../node_modules/react-native/ReactCommon/yoga'

# 如果RN版本 >= 0.45则加入下面三个第三方编译依赖
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'

target 'MyReactNativeAppTests' do
inherit! :search_paths
# Pods for testing
end

target 'MyReactNativeAppUITests' do
inherit! :search_paths
# Pods for testing
end

end

10.$ pod install

此处注意xcode的command line tool必须设置完成正常,如下图选择中了xcode 8.2.1 ,否则报错没有找到命令集合

11.使用本地Web服务调试

  1. <key>NSAppTransportSecurity</key>
  2. <dict>
  3. <key>NSExceptionDomains</key>
  4. <dict>
  5. <key>localhost</key>
  6. <dict>
  7. <key>NSTemporaryExceptionAllowsInsecureHTTPLoads</key>
  8. <true/>
  9. </dict>
  10. </dict>
  11. </dict>

在项目根目录A下启动

$npm start

引用框架

#import <React/RCTRootView.h>

  1. - (IBAction)highScoreButtonPressed:(id)sender {
  2. NSLog(@"High Score Button Pressed");
  3. NSURL *jsCodeLocation = [NSURL URLWithString:@"http://localhost:8081/index.bundle?platform=ios"];
  4.  
  5. RCTRootView *rootView =
  6. [[RCTRootView alloc] initWithBundleURL: jsCodeLocation
  7. moduleName: @"RNHighScores"
  8. initialProperties:
  9. @{
  10. @"scores" : @[
  11. @{
  12. @"name" : @"Alex",
  13. @"value": @""
  14. },
  15. @{
  16. @"name" : @"Joel",
  17. @"value": @""
  18. }
  19. ]
  20. }
  21. launchOptions: nil];
  22. UIViewController *vc = [[UIViewController alloc] init];
  23. vc.view = rootView;
  24. [self presentViewController:vc animated:YES completion:nil];
  25. }

12.打包js和资源文件

http://www.cocoachina.com/ios/20170511/19250.html

https://www.jianshu.com/p/e14c96fabcaf

在根目录下创建release_ios文件夹后

执行

  1. react-native bundle --entry-file index.ios.js --platform ios --dev false --bundle-output release_ios/main.jsbundle --assets-dest release_ios/

13.将生成的main.jsbundle导入到项目中

14.js路径替换为

  1. NSURL *jsCodeLocation = [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"];//[NSURL URLWithString:@"http://localhost:8081/index.bundle?platform=ios"];

15.未知大部分使用者Target下添加了shell命令

  1. export NODE_BINARY=node
  2. ../node_modules/react-native/scripts/react-native-xcode.sh

https://github.com/378056350/react-native-diary   一个日历源码项目

https://www.cnblogs.com/Unknw/p/6431375.html 如何新建类

按官网创建项目后,使用其它的示例代码,结果老是不成功显示,报错RCTImageView Not Found IN UIMANAGER这种错误,纠结了差不多一个星期,没错,我就是自学菜鸟,最后发现在Podfile导入的框架不够,没有包含RCTImage,也就是说需要什么就包含上,仔细些别缺失了,修改后执行pod update

创建ReactNative的iOS项目的更多相关文章

  1. ios学习总结(1) -- 创建第一个ios项目

    原文地址 下载并打开xcode. 接着新建一个工程,如下图所示: 点击Create a new Xcode project,之后选择ios下的Application,点击Single View App ...

  2. 在Xamarin.iOS项目中使用预设数据库

    在Xamarin.iOS项目中使用预设数据库 当开发者准备好一个预设数据库文件后,就可以将这个数据库文件添加到创建的项目中了.本节将分别在Xamarin.iOS和Xamarin.Android项目中使 ...

  3. react-native 创建 ios 项目

    创建React-Native项目 打开终端输入react-native init ProjectName,这里的ProjectName可以改成你想创建的项目名称.然后有两种方法启动项目 1.从终端开启 ...

  4. phonegap创建的ios项目推送消息出现闪退现象

    使用phonegap创建的ios项目,推送消息时,当程序在前台运行或者在后台运行状态下,推送消息过来,可以解析并且跳转: 但是在程序从后台退出的状态下,当消息推送过来的时候,点击通知栏,打开程序,程序 ...

  5. 关于ios项目沙盒中的文件和Xcode项目创建的文件

    //1.1获取在Xcode项目打开的情况下创建的Plist文件 NSString *path = [[NSBundle mainBundle]pathForResource:@"Profes ...

  6. [Xcode 实际操作]一、博主领进门-(1)iOS项目的创建和项目模板的介绍

    目录:[Swift]Xcode实际操作 本文将演示iOS项目的创建和项目模板的介绍. [Create a new Xcode project]创建一个新的项目. 在弹出的模板窗口中,显示了所有的项目模 ...

  7. Cordova 系列之创建一个iOS项目

    1.打开终端 2.输入命令 $ cd Desktop (PS:Desktop表示放在桌面,你可以选择放任意位置) 3.$  cordova create HelloWorld com.example. ...

  8. [AIR] NativeExtension在IOS下的开发实例 --- IOS项目的创建 (一)

    来源:http://bbs.9ria.com/thread-102037-1-1.html 最近看到本版块的很多关于NativeExtension的应用.但是都是在Android下面的应用.也有很多朋 ...

  9. iOS项目开发日常之创建文件(协议、类、分类、扩展)

    iOS项目开发过程中,是以不断创建文件的形式进行着的. 创建得比较频繁的文件类型是: 这两个类型中创建的文件有:子类.分类.扩展.协议四种文件,如下:    这四类文件是频繁创建的,我们来看一下各自分 ...

随机推荐

  1. [转]关于ios 推送功能的终极解决

    刚刚做了一个使用推送功能的应用 遇到了一些问题整的很郁闷 搞了两天总算是弄明白了 特此分享给大家 本帖 主要是针对产品发布版本的一些问题 综合了网上一些资料根据自己实践写的 不过测试也可以看看 首先要 ...

  2. 开发FTP不要使用sun.net.ftp.ftpClient

    转自:http://cai21cn.iteye.com/blog/700188 在开发一个web应用过程中,需要开发一个服务使用ftp功能将数据传输一个网外的ftp服务器.最初使用sun.net.ft ...

  3. webstorm开发vue项目环境配置

    1.首先安装nodejs,官网下载nodejs安装包,默认安装NPM包管理器(国内使用npm需要FQ,也可以使用淘宝的镜像:npm install -g cnpm –registry=https:// ...

  4. 最详尽的 JS 原型与原型链终极详解,没有「可能是」。(一)

    最详尽的 JS 原型与原型链终极详解,没有「可能是」.(一) 第二篇已更新,点击进入第三篇已更新,点击进入

  5. c++中局部变量初始化的问题

    在C语言里,全局变量如果不初始化的话,默认为0,也就是说在全局空间里: int x =0; 跟 int x; 的效果看起来是一样的.但其实这里面的差别很大,强烈建议大家所有的全局变量都要初始化,他们的 ...

  6. 《FPGA全程进阶---实战演练》第七章 让按键恢复平静

    1基础理论部分 A:“怎么按键按下去之后,结果不正常?”,B:“按键你消抖了吗?”A:“消什么抖,还要消抖?”,  B:“先检测按键变化,然后消抖过滤波动信号,最后输出稳定信号”,A:“我好像漏掉了什 ...

  7. Java如何获取本地计算机的IP地址和主机名?

    在Java编程中,如何获取本地计算机的IP地址和主机名? 以下示例显示如何使用InetAddress类的getLocalAddress()方法获取系统的本地IP地址和主机名. package com. ...

  8. mybatise插件反向生成数据库表相关Java代码

    1.下载相关jar包https://github.com/mybatis/generator/releases 2.配置xml文件 <?xml version="1.0" e ...

  9. 《objective-c基础教程》学习笔记 (一)—— 开发环境配置和简单类型输出

    懒惰是富有最大的敌人,再不前进,我们就out了.最近工作比较轻松,不是很忙.于是想晚上下班回家学习点新东西.看着苹果大军的一天天壮大,心里也是痒痒的.于是就想先系统的学习下Objective-C,为之 ...

  10. Servlet知识点回顾

    一.Servlet生命周期 服务器调用一个Servlet的8个步骤: 1.在服务器启动时,当Servlet被配置好或者被客户首次请求时,由服务器加载servlet,这一步相当于下列代码: Class ...