创建ReactNative的iOS项目
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)文件
- {
- "name": "MyReactNativeApp",
- "version": "0.0.1",
- "private": true,
- "scripts": {
- "start": "node node_modules/react-native/local-cli/cli.js start"
- }
- }
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服务调试
- <key>NSAppTransportSecurity</key>
- <dict>
- <key>NSExceptionDomains</key>
- <dict>
- <key>localhost</key>
- <dict>
- <key>NSTemporaryExceptionAllowsInsecureHTTPLoads</key>
- <true/>
- </dict>
- </dict>
- </dict>
在项目根目录A下启动
$npm start
引用框架
#import <React/RCTRootView.h>
- - (IBAction)highScoreButtonPressed:(id)sender {
- NSLog(@"High Score Button Pressed");
- NSURL *jsCodeLocation = [NSURL URLWithString:@"http://localhost:8081/index.bundle?platform=ios"];
- RCTRootView *rootView =
- [[RCTRootView alloc] initWithBundleURL: jsCodeLocation
- moduleName: @"RNHighScores"
- initialProperties:
- @{
- @"scores" : @[
- @{
- @"name" : @"Alex",
- @"value": @""
- },
- @{
- @"name" : @"Joel",
- @"value": @""
- }
- ]
- }
- launchOptions: nil];
- UIViewController *vc = [[UIViewController alloc] init];
- vc.view = rootView;
- [self presentViewController:vc animated:YES completion:nil];
- }
12.打包js和资源文件
http://www.cocoachina.com/ios/20170511/19250.html
https://www.jianshu.com/p/e14c96fabcaf
在根目录下创建release_ios文件夹后
执行
- 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路径替换为
- NSURL *jsCodeLocation = [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"];//[NSURL URLWithString:@"http://localhost:8081/index.bundle?platform=ios"];
15.未知大部分使用者Target下添加了shell命令
- export NODE_BINARY=node
- ../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项目的更多相关文章
- ios学习总结(1) -- 创建第一个ios项目
原文地址 下载并打开xcode. 接着新建一个工程,如下图所示: 点击Create a new Xcode project,之后选择ios下的Application,点击Single View App ...
- 在Xamarin.iOS项目中使用预设数据库
在Xamarin.iOS项目中使用预设数据库 当开发者准备好一个预设数据库文件后,就可以将这个数据库文件添加到创建的项目中了.本节将分别在Xamarin.iOS和Xamarin.Android项目中使 ...
- react-native 创建 ios 项目
创建React-Native项目 打开终端输入react-native init ProjectName,这里的ProjectName可以改成你想创建的项目名称.然后有两种方法启动项目 1.从终端开启 ...
- phonegap创建的ios项目推送消息出现闪退现象
使用phonegap创建的ios项目,推送消息时,当程序在前台运行或者在后台运行状态下,推送消息过来,可以解析并且跳转: 但是在程序从后台退出的状态下,当消息推送过来的时候,点击通知栏,打开程序,程序 ...
- 关于ios项目沙盒中的文件和Xcode项目创建的文件
//1.1获取在Xcode项目打开的情况下创建的Plist文件 NSString *path = [[NSBundle mainBundle]pathForResource:@"Profes ...
- [Xcode 实际操作]一、博主领进门-(1)iOS项目的创建和项目模板的介绍
目录:[Swift]Xcode实际操作 本文将演示iOS项目的创建和项目模板的介绍. [Create a new Xcode project]创建一个新的项目. 在弹出的模板窗口中,显示了所有的项目模 ...
- Cordova 系列之创建一个iOS项目
1.打开终端 2.输入命令 $ cd Desktop (PS:Desktop表示放在桌面,你可以选择放任意位置) 3.$ cordova create HelloWorld com.example. ...
- [AIR] NativeExtension在IOS下的开发实例 --- IOS项目的创建 (一)
来源:http://bbs.9ria.com/thread-102037-1-1.html 最近看到本版块的很多关于NativeExtension的应用.但是都是在Android下面的应用.也有很多朋 ...
- iOS项目开发日常之创建文件(协议、类、分类、扩展)
iOS项目开发过程中,是以不断创建文件的形式进行着的. 创建得比较频繁的文件类型是: 这两个类型中创建的文件有:子类.分类.扩展.协议四种文件,如下: 这四类文件是频繁创建的,我们来看一下各自分 ...
随机推荐
- [转]关于ios 推送功能的终极解决
刚刚做了一个使用推送功能的应用 遇到了一些问题整的很郁闷 搞了两天总算是弄明白了 特此分享给大家 本帖 主要是针对产品发布版本的一些问题 综合了网上一些资料根据自己实践写的 不过测试也可以看看 首先要 ...
- 开发FTP不要使用sun.net.ftp.ftpClient
转自:http://cai21cn.iteye.com/blog/700188 在开发一个web应用过程中,需要开发一个服务使用ftp功能将数据传输一个网外的ftp服务器.最初使用sun.net.ft ...
- webstorm开发vue项目环境配置
1.首先安装nodejs,官网下载nodejs安装包,默认安装NPM包管理器(国内使用npm需要FQ,也可以使用淘宝的镜像:npm install -g cnpm –registry=https:// ...
- 最详尽的 JS 原型与原型链终极详解,没有「可能是」。(一)
最详尽的 JS 原型与原型链终极详解,没有「可能是」.(一) 第二篇已更新,点击进入第三篇已更新,点击进入
- c++中局部变量初始化的问题
在C语言里,全局变量如果不初始化的话,默认为0,也就是说在全局空间里: int x =0; 跟 int x; 的效果看起来是一样的.但其实这里面的差别很大,强烈建议大家所有的全局变量都要初始化,他们的 ...
- 《FPGA全程进阶---实战演练》第七章 让按键恢复平静
1基础理论部分 A:“怎么按键按下去之后,结果不正常?”,B:“按键你消抖了吗?”A:“消什么抖,还要消抖?”, B:“先检测按键变化,然后消抖过滤波动信号,最后输出稳定信号”,A:“我好像漏掉了什 ...
- Java如何获取本地计算机的IP地址和主机名?
在Java编程中,如何获取本地计算机的IP地址和主机名? 以下示例显示如何使用InetAddress类的getLocalAddress()方法获取系统的本地IP地址和主机名. package com. ...
- mybatise插件反向生成数据库表相关Java代码
1.下载相关jar包https://github.com/mybatis/generator/releases 2.配置xml文件 <?xml version="1.0" e ...
- 《objective-c基础教程》学习笔记 (一)—— 开发环境配置和简单类型输出
懒惰是富有最大的敌人,再不前进,我们就out了.最近工作比较轻松,不是很忙.于是想晚上下班回家学习点新东西.看着苹果大军的一天天壮大,心里也是痒痒的.于是就想先系统的学习下Objective-C,为之 ...
- Servlet知识点回顾
一.Servlet生命周期 服务器调用一个Servlet的8个步骤: 1.在服务器启动时,当Servlet被配置好或者被客户首次请求时,由服务器加载servlet,这一步相当于下列代码: Class ...