无星的RN学习之旅(四)——通信、持久化存储、iOS打包

说说最近项目的一些感想吧。

一、RN的创意

RN其实我觉得是一个很有创意的想法。不知道各位写RN项目的时候,有没有打开Xcode看过app的层级关系,我发现RN的这个想法,真的很有创意。
作为一名原生的开发,一直都是一个控制器上放一个View,然后在这个底层的View上添加UI控件,当需要一个新的视图的时候,创建一个新的视图控制器,再放新的View。

重点来了!RN并不是这么做的

根视图.png

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的。

promise.png

(lz是iOS开发,iOS中可以先声明几个变量)在iOS的module中,可以先声明几个promise的回调。比如先声明

 RCTPromiseResolveBlock resolveA
 RCTPromiseResolveBlock resolveB
 RCTPromiseResolveBlock resolveC
 RCTPromiseResolveBlock resolveD

RCTPromiseRejectBlock rejectA
RCTPromiseRejectBlock rejectB
RCTPromiseRejectBlock rejectC
RCTPromiseRejectBlock rejectD

这四个回调的函数可以先声明,为什么会叫他通道,原因就是它其实可以这么理解,你将本来理解可能混乱的东西专一化,定义一个A方法成功的回调resolveA和一个A方法失败的回调rejectA,这两个回调只用于A方法。这么理解起来是不是清晰多了。因此可以理解为他是一个原生回调给RN的通信通道。
3.原生直接发消息,通过

[self sendEventWithName:@"EventReminder" body:@{@"name": eventName}];

这种方式注意了,请使用单例。

单例.png
#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

的文件,因此就可以直接读取出来。
这里给大家一个查看真机沙盒的方法:

1.png

2

3
4.png

显示包内容,这样就能下载真机的沙盒地址了
不过这里要注意了,里面存的json,都不是正儿八经的json。。。会多很多的转义符\和双引号单引号。这里我的推荐做法是先用json解析成字典,在对其进行特殊符号的去除操作(明天上代码- -)。如下:

#pragma mark -- JSON转字典
+(NSDictionary *)jsonToDic:(NSString *)jsonString {
  NSData *jsonData = [jsonString dataUsingEncoding:NSUTF8StringEncoding];
  NSError *error = nil;
  id jsonObject = [NSJSONSerialization JSONObjectWithData:jsonData
                                                  options:NSJSONReadingAllowFragments
                                                    error:&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

转载请说明来自:http://www.jianshu.com/u/fef7696741c8

无星的RN学习之旅(一)-环境安装以及新建项目
无星的RN学习之旅(二)-RN与原生的通信
无星的RN学习之旅(三)-bridge is not set.
无星的RN学习之旅(五)-关于react-navigation多层级页面返回时,去掉逐层推出动画
无星的RN学习之旅(六)-第三方App跳转,苹果商店跳转,loading框

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 157,012评论 4 359
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 66,589评论 1 290
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 106,819评论 0 237
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 43,652评论 0 202
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 51,954评论 3 285
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,381评论 1 210
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,687评论 2 310
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,404评论 0 194
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,082评论 1 238
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,355评论 2 241
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 31,880评论 1 255
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,249评论 2 250
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 32,864评论 3 232
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,007评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,760评论 0 192
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,394评论 2 269
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,281评论 2 259

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 170,544评论 25 707
  • 本篇文章是讲述 iOS 无埋点数据收集 SDK 系列的第二篇。在第一篇 中主要介绍了 SDK 整体实现思路以及...
    zerygao阅读 12,061评论 4 64
  • 现在的独生子女,一般都是爷爷奶奶姥姥姥爷看着,到了三四岁上幼儿园和小朋友玩玩。回到家,还是大人看着,没有玩伴,其实...
    岳家屯阅读 661评论 2 0
  • 8月1日参加了《沟通的艺术》40天共读活动,历时40天,每天读书打卡,一路下来对书中所讲有了一些感悟。 一、了解了...
    方雅2016阅读 419评论 0 2
  • 随着经济的发展,城乡差距越来越明显。每次假期回家看着冷清的村庄,开始想:以后这个村庄是否还会热闹? 用我的视角来带...
    听田阅读 154评论 0 0