React-Native项目错误总结

发表于 2020-03-31 Valine：

问题展示

错误原因:

预警信息(父视图)中没有设置背景颜色,默认背景颜色无法遮挡侧边栏的颜色

解决方案

预警信息(父视图)设置背景颜色

关于属性确认(PropTypes)

问题展示

import PropTypes from 'prop-types';

static propTypes = {
    select: PropTypes.bool,
    outStyle: PropTypes.style,
    word: PropTypes.string
};

错误分析

查看了一下PropTypes的属性确认类型,并没有style这个类型,所以会报上述警告,所以这边的警告消除要以在属性确认中PropTypes存在类型或者设置成style该有的类型

解决方案

方案一: 修改成style本身的类型

import { ViewPropTypes } from 'react-native';
import PropTypes from 'prop-types';

static propTypes = {
    select: PropTypes.bool,
    outStyle: ViewPropTypes.style,
    word: PropTypes.string
};

方案二: 观察传入的类型

style传入的类型为{xxx: xxx}类型,在PropTypes中匹配的位object类型,或者any类型都是合适的

import PropTypes from 'prop-types';

static propTypes = {
    select: PropTypes.bool,
    outStyle: PropTypes.object, //或者PropTypes.any
    word: PropTypes.string
};

iOS项目错误总结

发表于 2020-03-12 Valine：

解决 iOS View Controller Push/Pop 时的黑影

问题展示

之前做项目时,发现导航push到下个界面的时候,右上角会出现黑影,push完后就消失了,如下图

错误原因

iOS 自 7.x 某个版本以后就有这个问题,push到下个界面的时候右上角黑影为下个界面的颜色

解决方案

如果这个ViewController 是在 TabBarViewController 的 NavigationController 上 Push/Pop的，那么只需要把 TabBarViewController 的 View 设置一下白色背景就可以了。

建立一个 UINavigationController 的父类，在父类写上self.view.backgroundColor = [UIColor whiteColor];让你的NavigationController都继承，这样就OK了。

但是到这里为止，只解决了 50%，还有另外一种情况没有解决，那就是如果你 present了一个NavigationController + ViewController后，在这个下面再进行Pop/Push 也是会有黑影的情况下。这种情况如何解决呢？

类似的，设置一下 self.navigationController.view.backgroundColor = [UIColor whiteColor]; 即可。

Xcode11版错误总结

LLDB PRC

错误展示

具体原因未知,在去掉爱加密的服务之后在日志打印台上打印了具体报错信息,如下:

遇到React Native启动报错的问题 getCurrentAppState:error 和 objectAtIndexedSubscript: 的解决方案

错误原因

爱加密之后xcode11调试不会报具体错误信息
React-Native内部代码在xcode11中会报错

解决方案

在RCTModuleMethod.mm文件中

static BOOL RCTParseUnused(const char **input)
{
  return RCTReadString(input, "__unused") ||
         RCTReadString(input, "__attribute__((unused))");
}

替换成

static BOOL RCTParseUnused(const char **input)
{
  return RCTReadString(input, "__attribute__((unused))") ||
         RCTReadString(input, "__attribute__((__unused__))") ||
         RCTReadString(input, "__unused");
}

即可解决

iOS端实现React-Native差异化增量更新

发表于 2020-03-09 Valine：

关于React-Native

RN具有的优势有很多(虽然坑更多,一代版本一筐坑)，跨平台开发，一套代码Android和iOS通用，热更新，不用一直等苹果爸爸慢吞吞的审核流程，既然要做RN,那么RN的热更新部署肯定得学下，今天就总结一下一个刚学RN的小白对热更新的理解。

个人理解，RN的热更新有点类似App的版本更新，app内版本号与server端匹配，来判断是否要更新，替换加载的jsbundle文件，然后加载新的jsbundle文件来实现版本更新，那么实质上就是把app内要加载的jsbundle文件替换掉就OK了。

原理分析

react-native打ios离线包

打包命令说明

react-native bundle
Options:
--entry-file <path>          Path to the root JS file, either absolute or relative to JS root
（一般为index.js文件）
--platform [string]          Either "ios" or "android"
（RN入口文件的路径, 绝对路径或相对路径）
--transformer [string]       Specify a custom transformer to be used

--dev [boolean]              If false, warnings are disabled and the bundle is minified
（如果为false, 警告会不显示并且打出的包的大小会变小，默认为--dev true）
--prepack                    When passed, the output bundle will use the Prepack format.
（当通过时, 打包输出将使用Prepack格式化，默认为--prepack  false）
--bridge-config [string]     File name of a a JSON export of __fbBatchedBridgeConfig. Used by Prepack. Ex. ./bridgeconfig.json
（使用Prepack的一个json格式的文件__fbBatchedBridgeConfig 例如: ./bridgeconfig.json）
 --bundle-output <string>     File name where to store the resulting bundle, ex. /tmp/groups.bundle
（打包后的文件输出目录, 例: /tmp/groups.bundle）
--bundle-encoding [string]   Encoding the bundle should be written in (https://nodejs.org/api/buffer.html#buffer_buffer).[default: "utf8"]
（打离线包的格式 可参考链接https://nodejs.org/api/buffer.html#buffer_buffer.默认为utf-8格式）
---sourcemap-output [string]  File name where to store the sourcemap file for resulting bundle, ex. /tmp/groups.map
（生成Source Map，但0.14之后不再自动生成source map，需要手动指定这个参数。例: /tmp/groups.map）
--assets-dest [string]       Directory name where to store assets referenced in the bundle
（打包时图片资源的存储路径）
--verbose                    Enables logging
（显示打包过程）
--reset-cache                Removes cached files
（移除缓存文件）
--config [string]            Path to the CLI configuration file
（命令行的配置文件路径）

具体操作
1.cd [项目路径]
2.在react-native根目录下的ios目录下新建bundle文件夹（mkdir ./ios/bundle）（注意：输入打包命令前必须先新建bundle文件夹）
3.打包命令：react-native bundle –entry-file index.js –platform ios –dev false –bundle-output ./ios/bundle/index.ios.jsbundle –assets-dest ./ios/bundle/
4.结果展示

patches.pad差异化文件终端生成方案

利用google的diff文件（资料查出来，这个比较受欢迎，同时也兼容Objective-C），github地址

$ git clone https://github.com/LiuC520/nodediffpatch.git
$ cd nodediffpatch && npm i
$ sudo npm link
把新旧文件放入nodediffpatch/patch目录下

终端输入：patbundle patch -o test01old.jsbundle -n test01new.jsbundle

iOS实现生成差异化文件

简单方法:把diff-match-patch实现源码拖进工程中

导入#import “DiffMatchPatch.h”开始使用,下面演示用l1.txt和l2.txt文件来展示，可以比较直观的看出效果
l1.txt文本：123
l2.txt文本：12345

- (void)demo1{
  // 获取l1.txt文件路径
  NSString *path01 = [[NSBundle mainBundle]pathForResource:@"l1" ofType:@"txt"];
  // 根据l1.txt文件路径获取data内容
  NSData *data01 = [NSData dataWithContentsOfFile:path01];
  // 将data内容转换成字符串格式
  NSString *str01 = [[NSString alloc] initWithData:data01 encoding:NSUTF8StringEncoding];
  // 获取l2.txt文件路径
  NSString *path02 = [[NSBundle mainBundle]pathForResource:@"l2" ofType:@"txt"];
  // 根据l2.txt文件路径获取data内容
  NSData *data02 = [NSData dataWithContentsOfFile:path02];
  // 将data内容转换成字符串格式
  NSString *str02 = [[NSString alloc] initWithData:data02 encoding:NSUTF8StringEncoding];
  // 创建DiffMatchPatch工具类对象
  DiffMatchPatch *patch = [[DiffMatchPatch alloc]init];
  // 对比文件内容
  // 执行该语句之后会在bundle目录下生成patches.bat文件(差异补丁文件)
  NSMutableArray *patchesArr = [patch diff_mainOfOldString:str01 andNewString:str02 checkLines:YES];
  // 生成差异补丁包
  NSArray *patchesArr1 = [patch patch_makeFromDiffs:patchesArr];
  // 解析补丁包
  NSArray *newArray = [patch patch_apply:patchesArr1 toString:str01];
  //写入到新文件(注意:这边为了在PC端更加直观的看,直接写入到绝对路径)
  BOOL isTrue = [newArray[0] writeToFile:@"/Users/devil/Desktop/自己的/RNPlatForm/ios/l1.txt" atomically:YES encoding:NSUTF8StringEncoding error:nil];
  if (isTrue) {
    NSLog(@"写入成功");
  }else{
    NSLog(@"写入失败");
  }
}

执行代码后：
l1.txt文本：12345

iOS实现patches.pat与旧jsbundle离线包合并得到新的jsbundle离线包

- (void)demo2{
  // 获取l1.txt文件路径
  NSString *path01 = [[NSBundle mainBundle]pathForResource:@"l1" ofType:@"txt"];
  // 根据l1.txt文件路径获取data内容
  NSData *data01 = [NSData dataWithContentsOfFile:path01];
  // 将data内容转换成字符串格式
  NSString *str01 = [[NSString alloc] initWithData:data01 encoding:NSUTF8StringEncoding];
  // 创建DiffMatchPatch工具类对象
  DiffMatchPatch *patch = [[DiffMatchPatch alloc]init];
  // 获取差异化文件包路径
  NSString *patchesPath = [[NSBundle mainBundle]pathForResource:@"patches.pat" ofType:nil];
  //获取差异化文件内容
  NSData *patchesData = [NSData dataWithContentsOfFile:patchesPath];
  //解析差异化文件内容
  NSString *patchesStr = [[NSString alloc]initWithData:patchesData encoding:NSUTF8StringEncoding];
  //转换pat
  NSMutableArray *patchesArr = [patch patch_fromText:patchesStr error:nil];
  // 解析补丁包
  NSArray *newArray = [patch patch_apply:patchesArr toString:str01];
  //获取新文件路径
//  NSString *newFilePath = [[NSBundle mainBundle]pathForResource:@"text3" ofType:@"txt"];
  //写入到新文件(注意:这边为了在PC端更加直观的看,直接写入到绝对路径)
  BOOL isTrue = [newArray[0] writeToFile:@"/Users/devil/Desktop/自己的/RNPlatForm/ios/text3.txt" atomically:YES encoding:NSUTF8StringEncoding error:nil];
  if (isTrue) {
    NSLog(@"写入成功");
  }else{
    NSLog(@"写入失败");
  }
}

实现本地更新离线包

//创建两个按钮，第一个按钮跳转RN界面，加载jsbundle包，第二个按钮负责更新jsbundle包
UIButton *btn4 = [[UIButton alloc]init];
[btn4 setTitle:@"第五个" forState:UIControlStateNormal];
[btn4 setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];
btn4.frame = CGRectMake(40, 170, 60, 30);
[btn4 addTarget:self action:@selector(clickFifth) forControlEvents:UIControlEventTouchUpInside];
[self.view addSubview:btn4];

UIButton *btn5 = [[UIButton alloc]init];
[btn5 setTitle:@"更新第五个界面" forState:UIControlStateNormal];
[btn5 setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];
btn5.frame = CGRectMake(40, 200, 60, 30);
[btn5 addTarget:self action:@selector(demo2) forControlEvents:UIControlEventTouchUpInside];
[self.view addSubview:btn5];
//btn4按钮点击事件
- (void)clickFifth{
  NSURL *jsCodeLocation;
  jsCodeLocation = [[NSBundle mainBundle]URLForResource:@"test01old" withExtension:@"jsbundle"];
  [self creactRNPath:jsCodeLocation moduleName:@"test01platcode"]; 
}

- (void)creactRNPath:(NSURL *)jsCodeLocation moduleName:(NSString *)moduleName{
  RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation
                                                      moduleName:moduleName
                                               initialProperties:nil
                                                   launchOptions:nil];
  rootView.backgroundColor = [[UIColor alloc] initWithRed:1.0f green:1.0f blue:1.0f alpha:1];
  UIViewController *rootViewController = [[UIViewController alloc]init];
  rootViewController.view = rootView;
  [rootViewController.navigationController setNavigationBarHidden:YES animated:YES];
  [self.navigationController pushViewController:rootViewController animated:YES];
}
//btn5按钮点击事件
- (void)demo2{
  // 获取test01old.jsbundle文件路径
  NSString *path01 = [[NSBundle mainBundle]pathForResource:@"test01old" ofType:@"jsbundle"];
  // 根据test01old.jsbundle文件路径获取data内容
  NSData *data01 = [NSData dataWithContentsOfFile:path01];
  // 将data内容转换成字符串格式
  NSString *str01 = [[NSString alloc] initWithData:data01 encoding:NSUTF8StringEncoding];
  // 创建DiffMatchPatch工具类对象
  DiffMatchPatch *patch = [[DiffMatchPatch alloc]init];
  // 获取差异化文件包路径
  NSString *patchesPath = [[NSBundle mainBundle]pathForResource:@"test01patches.pat" ofType:nil];
  //获取差异化文件内容
  NSData *patchesData = [NSData dataWithContentsOfFile:patchesPath];
  //解析差异化文件内容
  NSString *patchesStr = [[NSString alloc]initWithData:patchesData encoding:NSUTF8StringEncoding];
  //转换pat
  NSMutableArray *patchesArr = [patch patch_fromText:patchesStr error:nil];
  // 解析补丁包
  NSArray *newArray = [patch patch_apply:patchesArr toString:str01];
  //写入到新文件
  BOOL isTrue = [newArray[0] writeToFile:path01 atomically:YES encoding:NSUTF8StringEncoding error:nil];
  if (isTrue) {
    NSLog(@"写入成功");
  }else{
    NSLog(@"写入失败");
  }
}

CocoaPods从私有库到公有库一站式教程

发表于 2020-03-09 Valine：

CocoaPods

CocoaPods是一个非常好用的第三个依赖库的管理工具,基本每一个iOS Coder都会使用它的吧.除了管理依赖库,它还有更加强大的一个功能,那就是创建podspec,链接私有库或者发布公有库.

创建私有Spec Repo

这个就在码云的平台上示例吧

1.在码云平台上创建私有库,用来存放.podspec描述文件

2.将远程私有库链接到本地

复制你码云上的私有库https地址,执行下面语句来链接远程私有库

1	pod repo add MySpec https://私有库https地址

去~/.cocoapods/repos目录下查看是否有MySpec文件夹,如果有则这一步执行成功.(Command+shift+.可显示隐藏隐藏文件夹)

其中master是CocoaPods公有库,而MySpec则是你自己的私有库

执行pod repo也可查看是否已经链接上了远程私有库

创建私有库

1.创建Lib Code

cd到你存放私有库的目录,然后执行pod lib create xxxxx,会出现下面选项让你选择(xxxxx为你的库名称,最好取名加上前缀,注意先搜索一下CocoaPods中是否有该名称,需要与CocoaPods中已有库的名称不同,不然后面上传公有库的时候会有问题)

可以按照我的截图来填写,如果不同的话则选择另外选项

2.替换文件

填完信息之后,会创建一个库工程,并会用xcode自动打开该工程.

打开工程目录,找到下面截图的ReplaceMe.m文件,把这个文件替换成你的代码文件.

如果有图片资源,则把图片等资源文件拷贝到Assets中,将来引用这个库的时候,Assets中的图片文件会一并引用.

打开终端,cd到.podspec文件目录,执行pod install,则在工程中已引入你刚才的代码文件(这里会出现一个问题,就是图片可能没有引入,则需要手动把图片拖入工程/Development Pods/xxxxx(你的库名称)/Resources中)

3.github代码托管以及编辑podspec

在github上新建repository

如图,如果你想建的是私有库,不被别人看到的,则选择Private选项,我这边选择Public,后面要上传至CocoaPods公有库.你这边的名字与上面的库名称相同.当然,你也可以在码云或者其他平台上实现代码托管,原理是相同的.创建好了记录下git地址

在xcode编辑器内找到podspec文件

初始情况下修改summary,description,homepage,source,resource_bundles,注释已经写在在截图中,看个人情况修改.
完成之后,进行远程仓库代码托管.依次执行以下命令

初始化git: git init

与远程库关联: git remote add origin https://xxxxxx

添加所有文件: git add .

填写修改或新增的内容: git commit -m "修改或新增的内容"

上传: git push -u origin master

标记tag(与podspec中的tag相同): git tag '0.1.0'

将tag提交到远程: git push --tags

刷新github项目地址看上传是否成功

4.podspec验证上传

本地验证podspec:pod lib lint --allow-warnings

xxxxxx passed validation 说明验证通过

同理远端验证podspec:pod lib lint --allow-warnings

如果出现Error,则需要一个一个去解决

上传到私有库:pod repo push MySpec xxxxxx.podspec

此时还会再验证一次,验证通过则上传成功,在~/.cocoapods/repos/MySpec可以看到你上传的库,同时在远端,也就是码云上面,也可以看到你上传的库

5.验证私有库导入

如何验证我们的库是否可用呢?执行以下操作:

新建一个iOS测试工程
创建podfile文件
执行pod repo 查看源,复制私有库的源

在podfile文件中添加私有库源: source ‘https://私有库源’
在podfile文件中导入私有库 pod ‘私有库名称’
在终端中cd 到podfile所在文件,执行pod install操作
打开’工程.xcworkspace’,在Pod中可看到私有库的代码

如果只想创建私有库使用的到这边就已经结束了,创建公有库的朋友再耐心点继续看下去.

上传公有库到cocoapods

注册cocoapods: pod trunk register 邮箱 '用户名' --verbose

去邮箱查看cocoapods发给你的邮件,打开链接

检验注册结果: pod trunk me

上传库: pod trunk push xxxxx.podspec

更新本地库: pod update

搜索你的库: pod search xxxxx,如果找不到,先执行下面一步

在测试工程podfile中,pod xxxx导入库,再把私有库源从podfile中删掉,再执行 pod install,如果能成功导入,则说明上传成功了.

hexo建站总结

发表于 2020-03-08 Valine：

关于建站

博客嘛,作为一个程序员总得要有一个,自己买服务器来建站,这是大神干的活,作为一个初级的菜鸡,想象不了需要花费多少时间精力,前几天从一个沙雕朋友那边知道了hexo,创建自己的博客简单方便,但在过程中还是遇到了不少问题.在此记录一下,也跟用hexo建博客的小伙伴们一起交流学习.
建站教程的话这边就不讲了,hexo的官方文档讲的很清楚的,由此访问hexo文档

关于编辑器

网上有不少人推荐typora,但我个人用的是webstorm,开发用的习惯了,也懒得装其他的(主要是电脑空间不太够),放一张图片,编辑markdown还是挺舒服的.

主题更换

选择主题

刚开始搭的时候,选择一个适(zhuang)合(bi)的主题,那肯定是必须的,主题选择,在这个网站上先选择一个心仪的主题,我个人选择的是hexo-themes-matery,下面就已hexo-themes-matery主题来举例.

下载主题

如果选择跟我一样的,那么到这个网站下载hexo-themes-matery,然后再你的博客路径下面站到themes文件夹

或者cd 到themes文件夹路径下,执行

1	git clone https://github.com/blinkfox/hexo-theme-matery.git

更换默认主题

修改 Hexo 根目录下的 _config.yml 的 theme 的值：theme: hexo-theme-matery

然后执行

1	$ hexo clean && hexo g && hexo s

hexo clean : 清除缓存文件 (db.json) 和已生成的静态文件 (public)。
hexo g : 生成静态文件。
hexo s : 启动服务器。

之后访问localhost:4000就可以看到你的博客更换过后的主题

代码高亮

博客的文章要好(zhuang)看(bi),那代码高亮必不可少,黑乎乎的一坨看下去的欲望都没有.

代码高亮在我这个主题中,作者有推荐一个插件,可能是我太笨了吧,一直不知道怎么用,有知道如何用的可以直接qq或邮箱联系我,随时接受打扰(晚上1点之后就另说了).额,说下这个插件的名字hexo-prism-plugin

因为我是一个iOS开发的码农,这个插件OC语法一直不能高亮(可能是因为我不会用),所以就另寻蹊径,有一个很多人都在用的highlight.js

访问该主页highlight.js

用法也很简单,不像网上大部分人说的需要下载放到plugins目录下面,直接在主题的ejs文件中导入使用就行

首先,在博客的配置文件中关闭默认的代码高亮

1 2	highlight: enable: false

我使用的主题是在hexo-theme-matery/layout/_partial/header.js和footer.js中的<head></head>中引入引用

<link rel="stylesheet"
          href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.8/styles/vs2015.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.8/highlight.min.js">
</script>
<script>
    hljs.initHighlightingOnLoad();
</script>

可以看到,我这边使用的主题是vs2015

对了,另外跟萌新说下,在哪边选这些主题

点击这里浏览各种主题的效果

再多嘴一句,选完之后最好在浏览器中访问一下css是否存在

像这个cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.8/styles/vs2015.min.css

图片上传

在网上查了有两种方式,哪种好用,则自己选择,个人是主推第二种方式

第一种方式,在第三方网站上上传图片,譬如七牛,然后在你博客中已下面格式即可插入图片,

1	![图片简介](https://图片链接)

优点:不占git空间.
缺点:图片管理的想自杀

第二种方式,在本地插入,hexo官网也有相关说明,hexo图片上传说明

设置站点配置_config.yml:将post_asset_folder: false改为post_asset_folder: true

执行hexo new [xxxx],生成xxxx.md和xxxx文件夹

把要引用的图片拷贝到xxxx文件夹中

来引用本地图片

如果想使用markdown语法来保持文章编辑整洁,那么可以使用hexo-asset-image插件来实现

那么配置的顺序则为:

设置站点配置_config.yml:将post_asset_folder: false改为post_asset_folder: true

执行 npm install hexo-asset-image –save 装插件

执行hexo new [xxxx],生成xxxx.md和xxxx文件夹

把要引用的图片拷贝到xxxx文件夹中

使用![](xxxx/example.jpg)来引用本地图片

注意:此时图片还是不能展示,插件1.0.0版本有问题,正常显示把插件版本切换到0.0.1,虽然不清楚作者为什么新的代码反而有错.

哎,1.0.0版本有问题,那就切到0.0.1版本试试

打开博客根目录下的package.json文件

把hexo-asset-image的版本号改成0.0.1,然后windows打开cmd,cd到博客根目录下执行npm install或者yarn install(你装过yarn的话),mac也是同样的操作.

装完之后,看下图片上传的效果,执行下面语句

1	hexo clean && hexo g && hexo s

刷新localhost:4000来看看图片在本地是否已经上传了

1	hexo clean && hexo g && hexo d

打开你的github博客地址,看看远程是否已经上传了本地图片

优点:图片管理清楚舒服
缺点:git空间随着图片越来越满
如果对于上面图片上传的配置的总结有什么问题请联系我,在总结之外的我应该也不太清楚了,祝你好运.

react-native-side-menu展示问题

问题展示

错误原因:

解决方案

关于属性确认(PropTypes)

问题展示

错误分析

解决方案

解决 iOS View Controller Push/Pop 时的黑影

问题展示

错误原因

解决方案

Xcode11版错误总结

LLDB PRC

错误展示

错误原因

解决方案

关于React-Native

react-native打ios离线包

iOS实现生成差异化文件

iOS实现patches.pat与旧jsbundle离线包合并得到新的jsbundle离线包

实现本地更新离线包

CocoaPods

创建私有Spec Repo

1.在码云平台上创建私有库,用来存放.podspec描述文件

2.将远程私有库链接到本地

创建私有库

1.创建Lib Code

2.替换文件

3.github代码托管以及编辑podspec

4.podspec验证上传

5.验证私有库导入

上传公有库到cocoapods

关于建站

关于编辑器

主题更换

选择主题

下载主题

代码高亮

图片上传