无星的RN学习之旅（四）——通讯、持久化存储、iOS打包

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

1、RN的创意

RN其实我以为是一个颇有创意的想法。不知道各位写RN项目的时候，有没有打开Xcode看过app的层级关系，我发现RN的这个想法，真的颇有创意。

做为一名原生的开发，一直都是一个控制器上放一个View，而后在这个底层的View上添加UI控件，当须要一个新的视图的时候，建立一个新的视图控制器，再放新的View。

重点来了！RN并非这么作的

RN是将App建立的时候生成的根视图控制器，也就是底层的视图控制器，做为根本，而后经过JS文件写的视图，也就是View，不停的增长在这个rootViewCtrl上，进行覆盖替换。

2、Text的区别

或许有的兄弟还没遇到这个坑，假如使用图片或者其余背景色做为背景，往上添加Text标签的时候，安卓默认为透明背景色，可是苹果默认为灰白色。所以，在写App的时候，须要在Text的样式添加backgroundColor为transparent

backgroundColor:'transparent',
复制代码

3、原生与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 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}];
复制代码

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

#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学习之旅（三)

4、RN与webView中html的通讯

这块我感受有坑，但由于html不是强项，所以交给咱们前端去作了。按官网的标准，使用onMessage()发送的消息在html中常常接受不到，不知道是为何，但愿有知道的旁友能够教教我=。=

5、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模式的错误，忽略便可。 等明天上班再上图。。。这个地方的图有点难搞了。。。调试出错了我再截图回头放上来

6、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: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
复制代码

转载请说明来自：www.jianshu.com/u/fef769674…

无星的RN学习之旅（一）-环境安装以及新建项目

无星的RN学习之旅（二）-RN与原生的通讯

无星的RN学习之旅（三）-bridge is not set.

无星的RN学习之旅（五）-关于react-navigation多层级页面返回时，去掉逐层推出动画

无星的RN学习之旅（六）-第三方App跳转，苹果商店跳转，loading框