无星的RN学习之旅(四)——通信、持久化存储、iOS打包
说说最近项目的一些感想吧。
一、RN的创意
RN其实我觉得是一个很有创意的想法。不知道各位写RN项目的时候,有没有打开Xcode看过app的层级关系,我发现RN的这个想法,真的很有创意。
作为一名原生的开发,一直都是一个控制器上放一个View,然后在这个底层的View上添加UI控件,当需要一个新的视图的时候,创建一个新的视图控制器,再放新的View。
重点来了!RN并不是这么做的
RN是将App创建的时候生成的根视图控制器,也就是底层的视图控制器,作为根本,然后通过JS文件写的视图,也就是View,不停的增加在这个rootViewCtrl上,进行覆盖替换。
二、Text的区别
或许有的兄弟还没遇到这个坑,假如使用图片或者其他背景色作为背景,往上添加Text标签的时候,安卓默认为透明背景色,但是苹果默认为灰白色。因此,在写App的时候,需要在Text的样式添加backgroundColor为transparent
backgroundColor:'transparent',
复制代码
三、原生与RN的通信
以前对原生与RN的通信不太了解。现在有了一些想法。
1.callback的通信方式,是会返回一个callback,这个callback是可以保存的,也就是说这个返回结果可以保存再用的。
2.promise,这个就比较有趣了,形象的说,这是个“通道”,RN的方法中,放一个promise的参数,在原生的module中,可以先定义几个promise的回调,在不同的地方用。 举个例子,我在RN中写几个方法。分别是:调用A方法,调用B方法,调用C方法,调用D方法。都是带Promise的。
(lz是iOS开发,iOS中可以先声明几个变量)在iOS的module中,可以先声明几个promise的回调。比如先声明
RCTPromiseResolveBlock resolveARCTPromiseResolveBlock resolveBRCTPromiseResolveBlock resolveCRCTPromiseResolveBlock resolveDRCTPromiseRejectBlock rejectA
RCTPromiseRejectBlock rejectB
RCTPromiseRejectBlock rejectC
RCTPromiseRejectBlock rejectD
复制代码
这四个回调的函数可以先声明,为什么会叫他通道,原因就是它其实可以这么理解,你将本来理解可能混乱的东西专一化,定义一个A方法成功的回调resolveA和一个A方法失败的回调rejectA,这两个回调只用于A方法。这么理解起来是不是清晰多了。因此可以理解为他是一个原生回调给RN的通信通道。
3.原生直接发消息,通过
[self sendEventWithName:@"EventReminder" body:@{@"name": eventName}];
复制代码
这种方式注意了,请使用单例。
#pragma mark -- RCTEventEmitter类单例
+ (id)allocWithZone:(NSZone *)zone {static RNBridge *sharedInstance = nil;static dispatch_once_t onceToken;dispatch_once(&onceToken, ^{sharedInstance = [super allocWithZone:zone];});return sharedInstance;
}
复制代码
不然可能会报bridge为空。
详情可见
无星的RN学习之旅(三)
四、RN与webView中html的通信
这块我感觉有坑,但因为html不是强项,因此交给我们前端去做了。按官网的标准,使用onMessage()发送的消息在html中经常接受不到,不知道是为什么,希望有知道的旁友可以教教我=。=
五、debug是个坑!!!
在我使用真机调试的时候,经常报找不到资源,这时候需要将appdelegate的j什么什么的我给忘了- -明天去公司复制一下代码。
jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index.ios" fallbackResource:nil];
// jsCodeLocation = [NSURL URLWithString:@"http://自己的ip地址/index.ios.bundle?platform=ios&dev=true"];
复制代码
需要把地址更换为ip地址,注意,debug模式,手机和电脑必须处于同一个网段下。差不多就是这个地方来回换,总能debug进去。
当点击事件报错的时候,注意一下飘红信息,有的是debug模式的错误,忽略即可。 等明天上班再上图。。。这个地方的图有点难搞了。。。调试出错了我再截图回头放上来
六、RN的持久化存储,AsyncStorage
其实这一块是我旁边的安卓大佬写的,我没啥了解的,我要说的也不是如何存储。。 我要说的是取出。先说下可能出现的应用场景:
在App初始化的时候,可能需要从本地取储存的数据,iOS原生开发都是在沙盒里存储,安卓也有对应的地方去存储。但现在换RN了,可能有的老哥就不知道咋办了。
其实不管那些乱七八糟的,RN的存储也是基于原生去封装的。就iOS来说,数据其实还是存在沙盒中,位于Documents文件夹下,会默认创建一个名为
RCTAsyncLocalStorage_V1
复制代码
的文件夹,其中有个默认名为
manifest.json
复制代码
的文件,因此就可以直接读取出来。
这里给大家一个查看真机沙盒的方法:
显示包内容,这样就能下载真机的沙盒地址了
不过这里要注意了,里面存的json,都不是正儿八经的json。。。会多很多的转义符\和双引号单引号。这里我的推荐做法是先用json解析成字典,在对其进行特殊符号的去除操作(明天上代码- -)。如下:
#pragma mark -- JSON转字典
+(NSDictionary *)jsonToDic:(NSString *)jsonString {NSData *jsonData = [jsonString dataUsingEncoding:NSUTF8StringEncoding];NSError *error = nil;id jsonObject = [NSJSONSerialization JSONObjectWithData:jsonDataoptions:NSJSONReadingAllowFragmentserror:&error];if (jsonObject != nil && error == nil){return jsonObject;}else{// 解析错误return nil;}
}#pragma mark -- 去除RN存储数据解析后的字符串含有 " 和 转义符
+(NSString*)removeEscapeCharacter:(NSString*)string{
// 首先自己定义一个NSCharacterSet, 包含需要去除的特殊符号NSCharacterSet *set = [NSCharacterSet characterSetWithCharactersInString:@"@/:;()¥「」"、[]{}#%-*+=_\\|~<>$€^•'@#$%^&*()_+'\""];NSString *responseString = [string stringByTrimmingCharactersInSet:set];return responseString;
}
复制代码
这是我能想到的最好办法了,如果还有大佬有更高级的方法,麻烦告诉一声~~
七:(伪)modal与alert冲突
为什么要说一个伪字呢,因为我发现,似乎不是冲突,而是在某些情况下modal的弹窗或者alert的弹窗会导致应用卡死,应该算是一个bug吧。就比如做跳转webview的时候alert等情况下。。想了一下,这个地方的代码不太好上,还是等各位自己遇到吧。。。。
八:debug产生的奇怪效果
1.原生的UI优先级会更高:当你某个效果跳转展现原生UI的时候,你进行reload,你会发现应用重新刷新,但是页面却仍然是原生的页面再最上层,这个原生的UI是不会进行reload的。。这时候只能重启服务来重新打开app
2.modal视图层在最上面。你也可以试试弹一个modal,reload也不会刷新这个modal。
九:iOS打包
cd到项目目录下
然后手动在项目目录下的iOS文件夹创建一个bundle文件夹
然后打开命令行,输入
react-native bundle --entry-file index.ios.js --bundle-output ./ios/bundle/index.ios.jsbundle --platform ios --assets-dest ./ios/bundle --dev false
复制代码
执行完毕之后,你就发现bundle文件夹下就多了静态资源文件。
但注意了,只有require导入的图片资源会被放进来
静态网页的css样式之类的,资源可能不会被放进来,这时候怎么办?答案是手动导入。
暂时就想到这么多,等项目完成了再进行一下经验完善~~~
2017-11-17
如果你使用上面的打包报错,报错信息为
error: options '--entry-file' missing
复制代码
请使用以下命令打包:
react-native bundle --platform ios --entry-file index.ios.js --bundle-output ./ios/bundle/index.ios.jsbundle --assets-dest ./ios/bundle --dev false
复制代码
新版本0.5版本以上(没有index.ios.js的)用下面这个,其实就是改了一丢丢
react-native bundle --entry-file index.js --bundle-output ./ios/bundle/index.jsbundle --platform ios --assets-dest ./ios/bundle --dev false
复制代码
转载请说明来自:www.jianshu.com/u/fef769674…
无星的RN学习之旅(一)-环境安装以及新建项目
无星的RN学习之旅(二)-RN与原生的通信
无星的RN学习之旅(三)-bridge is not set.
无星的RN学习之旅(五)-关于react-navigation多层级页面返回时,去掉逐层推出动画
无星的RN学习之旅(六)-第三方App跳转,苹果商店跳转,loading框
无星的RN学习之旅(四)——通信、持久化存储、iOS打包相关推荐
- 无星的RN学习之旅(六)-第三方App跳转,苹果商店跳转,loading框
1.第三方App跳转 这是很常见的问题,第三方app跳转到本app去做一些业务操作. 但是这时候会发现,你跳进来,是黑色的,没有界面,没想到吧23333 其实这在前面说过,RN的想法很独特,是一个ct ...
- HALCON学习之旅(四)
HALCON学习之旅(四) 文章目录 HALCON学习之旅(四) 1.如何对区域进行反选,补集,交集,合并操作 2.如何对区域进行填充操作 3.如何根据区域特征过滤区域 4.如何画各种交互ROI图形 ...
- iOS的四种持久化存储
什么是数据持久化存储? 所谓的持久化,就是将数据保存到硬盘中,使得在应用程序或机器重启后可以继续访问之前保存的数据. 什么是沙盒机制? iOS程序默认情况下只能访问程序自己的目录,这个目录被称为&qu ...
- Objective-C学习之旅(四)----内存管理2----retain点语法
一.retain属性的主要作用 1.O-C内存管理和点语法 1>OC内存管理正常情况要使用大量的retain和relrese操作 2>点语法可以减少使用retain和release的操作 ...
- 我的Go语言学习之旅四:各种变量的声明
同样还是直接看实例吧,比起各种赘述来要实际多了 a:=10; b:="Hello World"; fmt.Printf("%d\n",a); fmt.Print ...
- 从零开始学习docker(九)持久化存储和数据共享之 bind Mounting
撸了今年阿里.头条和美团的面试,我有一个重要发现.......>>> 数据持久化的第一种方式Data Volume 使用Data Volume: 首先在Dockerfile中定义 V ...
- 从零开始学习docker(九)持久化存储和数据共享之 Data Volume
撸了今年阿里.头条和美团的面试,我有一个重要发现.......>>> 有些时候容器会产生一些数据,而我们不希望这些数据随着容器的删除而删除.想保证数据的安全,一般用在数据库. 首先看 ...
- HDR学习之旅(四)—HDR10+
HDR学习之旅(四)-HDR10+ 目录 HDR学习之旅(四)-HDR10+ 介绍 高动态范围视频的背景 高动态范围的视频标准 高动态范围内容工作流 静态元数据的限制 动态元数据的必要性 HDR10 ...
- WCF学习之旅—实现支持REST客户端应用(二十四)
WCF学习之旅-实现REST服务(二十二) WCF学习之旅-实现支持REST服务端应用(二十三) 在上二篇文章中简单介绍了一下RestFul与WCF支持RestFul所提供的方法,及创建一个支持RES ...
最新文章
- 2022-2028年成都餐饮业投资分析及前景预测报告
- 复习(三)—— 进程管理详解
- FusionCharts參数中文说明
- C# 网络编程之最简单浏览器实现
- c语言字符串查找子串并截取,如何搜索截取特定字符串?
- bzoj1934: [Shoi2007]Vote 善意的投票(最小割)
- php符号 set,PHP 符号大全
- RedisCrawlSpider
- MS“未与信任SQL Server连接相关联”跟在使用ASP.NET网站管理工具出现“遇到错误。请返回上一页并重试。”的解决办法!...
- 腾讯这套SpringMvc面试题你了解多少?(面试必备)
- c语言标准课程方案,《C语言程序设计》课程标准方案.doc
- opencv编译问题
- python代码打错怎么删除_Python程序员最常犯的十个错误
- 基于vue+js的商城、购物网站 毕业设计 毕设源代码的实现和设计(6)购物车
- 微信小程序 share-element page-container 组件的使用
- windows连接局域网打印机出现0x0000007c错误处理方法
- edge浏览器添加新标签页问题
- 如何让微信号开通检测软件替你顶起一片天?
- 谢邀:知乎IPO是一次对文化潮牌的估值
- 电脑回收站清空了怎么恢复回来
热门文章
- boost::hana::front用法的测试程序
- boost::remove_edge用法的测试程序
- boost::fibers::buffered_channel的测试程序
- boost::detail::allocator模块的测试程序
- GDCM:gdcm::Sorter的测试程序
- GDCM:gdcm::Directory的测试程序
- GDCM:检索dicom文件中某个位置存在的Icon测试程序
- 基于Boost::beast模块的同步HTTP客户端
- C语言矩阵M*N节省空间的算法(附完整源码)
- C++并查集Disjoint Set(附完整源码)