由于node_modules文件夹在别的地方,所以执行命令时,有下面改动的地方:

在植入到原生应用中 http://reactnative.cn/docs/embedded-app-ios.html#content

通过CocoaPods安装React Native

# 取决于你的工程如何组织,你的node_modules文件夹可能会在别的地方。
# 请将:path后面的内容修改为正确的路径。
pod 'React', :path => './node_modules/react-native', :subspecs => [  'Core','RCTImage','RCTNetwork','RCTText','RCTWebSocket',# 添加其他你想在工程中使用的依赖。
]

这里的path  指定的是本地路劲,此目录下一定要有.podspec文档,使用时候相对路劲总是不对,后来改用绝对路径

启动开发服务器

官方文档写的

配置的JS_DIR 路径不对,后来改成
npm run start -- --root "/Users/huhmf/Desktop/myCode/facebook/reactDemo/reactDemo/ReactComponent"

npm start -- --root ../reactDemo/reactDemo/ReactComponent --assetRoots ../reactDemo/reactDemo/Assets.xcassets

packager/packager.sh --assetRoots ../reactDemo/reactDemo/Assets.xcassets --root ../reactDemo/reactDemo/ReactComponent

上面3命令都是可以更改执行目录的,灰色部分就是绝对/相对路径。

代码部分

//下载jsbundle 压缩文件
-(void)download{WS(weakself)[NetRequest NetRequestDownloadWithRequestURL:@"https://github.com/ymcao/TopNewsIOS/raw/master/filezip/news_jsbundle.zip" WithParameter:nil WithReturnValeuBlock:^(idreturnValue) {NSArray*paths =NSSearchPathForDirectoriesInDomains(NSDocumentDirectory, NSUserDomainMask, YES);NSString*documentpath = ([paths count] > 0) ? [paths objectAtIndex:0] : nil;NSString* unzipfrom = [documentpath stringByAppendingFormat:@"%@%@",@"/",returnValue];NSRange range= [returnValue rangeOfString:@"."];NSString* result =[returnValue substringToIndex:range.location];NSString* unzipto = [documentpath stringByAppendingFormat:@"%@%@",@"/",result];NSLog(@"%@",unzipfrom);dispatch_async(dispatch_get_global_queue(DISPATCH_QUEUE_PRIORITY_LOW,0), ^{[SSZipArchive unzipFileAtPath:unzipfrom toDestination:unzipto progressHandler:^(NSString *entry, unz_file_info zipInfo, long entryNumber, longtotal) {} completionHandler:^(NSString *path, BOOL succeeded, NSError *error) {if(succeeded){dispatch_async(dispatch_get_main_queue(),^{[weakself initReactModule:result];});}}];});} WithErrorCodeBlock:^(iderrorCode) {}];
}//初始化React模块,RCTRootView
-(void)initReactModule:(NSString*)filename{NSArray*paths =NSSearchPathForDirectoriesInDomains(NSDocumentDirectory, NSUserDomainMask, YES);NSString*documentpath = ([paths count] > 0) ? [paths objectAtIndex:0] : nil;NSString* unzipto = [documentpath stringByAppendingFormat:@"%@%@",@"/",filename];NSBundle*bundle=[NSBundle bundleWithPath:unzipto];NSURL*jsCodeLocation= [bundle URLForResource:@"news.ios" withExtension:@"jsbundle"];NSLog(@"%@", [bundle resourcePath]);rootView=[[RCTRootView alloc] initWithBundleURL:jsCodeLocationmoduleName:@"topnews"initialProperties:@{@"newsid":@"index"}launchOptions:nil];[self.view addSubview:rootView];[rootView mas_makeConstraints:^(MASConstraintMaker *make) {make.width.mas_equalTo(SCREEN_WIDTH);make.height.mas_equalTo(SCREEN_HEIGHT-TAB_BAR_HEIGHT-_scrollMenu.frame.size.height);make.top.equalTo(_scrollMenu.mas_bottom);}];
}

转载于:https://www.cnblogs.com/dhui69/p/5102437.html

React Native 学习记录相关推荐

  1. React Native学习提纲

    React Native学习提纲 当前版本最后修订日期: 2015年10月21日 一. React.js入门基础 1.基础HTML/CSS与基础开发工具使用 - html基础 doctype.常用标签 ...

  2. React Native 学习资源精选仓库

    <React Native Awesome>这里fork过来的,汇集了各类react-native学习资料.工具.组件.开源App.资源下载.以及相关新闻等,只求精不求全.因后面无法 Pu ...

  3. React Native 学习资源精选仓库(汇聚知识,分享精华)

    React Native 学习资源精选仓库(汇聚知识,分享精华) <React Native Awesome>这里fork过来的,汇集了各类react-native学习资料.工具.组件.开 ...

  4. React Native学习-第一篇

    记录学习react native中碰到的问题. 操作系统:OS X EI Capitan 10.11.1 =============================================== ...

  5. React Native学习总结第一天

    1.0 配置React Native的开发环境 请参考 虽然过程很复杂,但是确实没啥难度(react-native init testProject) 2.0 ES6的基础语法 变量和常量声明 let ...

  6. iOS开发者React Native学习路线

    2019独角兽企业重金招聘Python工程师标准>>> http://blog.talisk.cn/blog/2016/08/13/RN-Learning-path-for-iOS- ...

  7. react基础学习记录一

    react 学习记录 自己学习,记录便于后面回顾 基础知识点的记忆: state与props state是组件自己的数据,而props是父组件通过属性赋值方式将其传送给组件:这样达到了,父子组件数据的 ...

  8. React Native学习资源汇总

    目前主流的移动跨平台技术方案大体可以分为三类,一类是使用原生内置浏览器加载HTML5的Hybrid技术方案,采用此种方案的主要有Cordova.Ionic和微信小程序:另一类是使用JavaScript ...

  9. react native学习笔记29——动画篇 Animated高级动画

    1.前言 上一节我们学习了全局的布局动画api--LayoutAnimation,体验到其流畅柔和的动画效果,但有时我们需要实现一些更精细化的动画,或者完成一些组合动画,这时我们可以使用React N ...

最新文章

  1. TimeQuest学习之三------外部寄存器模型
  2. 卡巴斯基安全浏览器_卡巴斯基 for windows 全方位安全软件2021注册表清除版
  3. 《21世纪机器人》一一第1章 他用自己的思想打造机器人
  4. 女孩子学电脑进入IT行业有什么优势?
  5. SpringMVC+redis整合
  6. 服务器安装Windows Server + Ubuntu双系统
  7. 两个时间计算毫秒在线_蹲坑英语时间之in a jiffy
  8. 功率谱估计性能分析及matlab仿真,功率谱估计性能分析及Matlab仿真.doc
  9. C语言函数手册:c语言库函数大全|C语言标准函数库|c语言常用函数查询
  10. c语言设计程序框图,C语言课程设计————写下流程图! 谢谢
  11. Spring DAO之JDBC
  12. 开发一个大数据网站做的铺垫
  13. Spring Boot集成ShedLock分布式定时任务实例
  14. git 命令之 如何将本地新建分支推到服务器上
  15. 1、Intellij IDEA中启动NameServer
  16. 计算机基础(一):ION IOMMU 内存申请
  17. 重启iis的命令是什么?三种简单的重启方式
  18. Android Studio 开发APP流程
  19. 可孚医疗的数字化突围
  20. Java中的注解是什么意思,有什么用

热门文章

  1. 已经到了退休年龄的城乡居民,可以一次性补交十五年的养老金吗?
  2. 投资赚钱发财, 财务自由,需要如下几个因素
  3. 一个做运营的朋友过来抱怨,现在HR谈薪都这么强硬吗?
  4. 一个 JVM 参数引发的频繁 CMS GC
  5. linux mysql跑高_linux 下如何查看mysql跑了哪些服务
  6. azure 使用_使用Azure Data Studio开始您的旅程
  7. sql 查询手动创建的表_学习SQL:使用SQL查询手动创建报告
  8. sql查看数据库线程数_SQL Server始终在可用性组数据库上的最大辅助线程
  9. 如何在SQL Server中索引外键列
  10. sql 逻辑运算符_SQL Like逻辑运算符介绍和概述