React Native 使用自定义字体

使用

关于如何在 react native 引入自定义字体其实已经有很多的教程,比如 React Native Custom Fonts 讲的就比较明白了。

总结一下就是以下四步:

  1. 将字体引入项目中,比如放在 src/static/fonts 目录下;

  2. package.json 文件中插入下面这段代码:

    1
    2
    3
    4
    5
    "rnpm": {
    "assets": [
    ".src/static/fonts/"
    ]
    }
  3. 使用 react-native link 命令将字体 link 到 iOS 项目和 Android 项目中;

  4. 检查 iOS 项目中的 info.plist 文件和 Android 的 /app/src/main/assets/fonts 文件夹下有没有你引入的这些字体,有就说明你引入成功了;

错误

但是这里有一个问题,就是虽然你成功地引入了自定义字体,但是在使用时,可能还是会出现 Unrecognized font family xxxx 的错误,这很有可能是因为你看到并使用的字体的名字和字体内部定义的不一致,这就导致了系统不能识别你所使用的字体。

解决方案如下:

  1. 在 iOS 的 “AppDelegate.m” 插入下列代码,运行,然后在控制台中查看字体正确的名称:

    1
    2
    3
    4
    5
    6
    7
    for (NSString* family in [UIFont familyNames])  {
    NSLog(@"%@", family);

    for (NSString* name in [UIFont fontNamesForFamilyName: family]) {
    NSLog(@" %@", name);
    }
    }
  2. 在 react native 中使用正确的名称;

参见 https://github.com/facebook/react-native/issues/18269

k8s 监控部署

在 k8s 上,我们通过结合 cAdvisor、Heapster、influxdb 和 grafana 来完成对集群监控信息的收集、存储和展示。

  1. cAdvisor: 能收集正在运行的容器的信息:CPU、内存、文件系统、网络等;
  2. Heapster:通过节点(node)的 kubelet 来查询/聚合 cAdvisor 收集的数据;
  3. influxdb:存储 heapster 聚合的信息;
  4. grafana:将存储的信息展示出来;

mage-20180403133652

Jenkins + Gitlab + Kubernetes 的自动化持续集成与部署

本文是以 Maven 项目为例来搭建 Jenkins + Gitlab + Kubernetes 的自动化持续集成与部署的流程,重点在于 jenkins + gitlabpush 的钩子触发和 jenkins + Kubernetes 的自动部署,至于项目编译,则可以依照各自需求进行编译。

本文的自动化持续集成与部署思路:

  1. 在将代码上传至 gitlab 时,触发 push 的钩子,在 jenkins 中进行项目的编译;
  2. 自动将编译后的文件打包成 docker 镜像,并上传至(私有)docker hub
  3. 修改 Kubernetes 的服务配置文件(Service.yamlDeployment.yaml)中的镜像变量;(因为在我将每一个 jenkins 构建的版本号作为了 docker 镜像的版本号,所以每次都要自动改变)
  4. Kubernetes 的服务配置文件上传至 Kubernetesmaster 服务器;
  5. Jenkins 中执行 kubectl apply -f file.yaml,在 Kubernetes 部署服务;

这里假装是一张流程图(脑补…)

关于声明式编程和命令式编程

关于声明式编程和命令式编程

声明式编程还是命令式编程是在编程的时候的侧重点不同:

  1. 命令式编程:它侧重于如何实现程序,就像我们刚接触编程的时候那样,我们需要把程序的实现过程按照逻辑结果一步步写下来。
  2. 声明式编程:它侧重于定义想要什么,然后告诉计算机/引擎,让他帮你去实现。像 React,就是一个使用 声明式编程的一个很好的例子。

关于命令式编程没什么好说的,就是我们最正常的按照逻辑实现的步骤。

至于声明式编程,它只关心结果是否与定义的一致,并不关心实现的过程。虽然在真实的开发中,这个实现的具体过程仍是由开发者实现,但是这个具体实现过程也是和执行过程分离了的。举个例子:

我们现在要实现这样一个逻辑:将一个数组中的元素乘2后放入一个新数组。

1
2
3
4
5
6
let arr = [1, 2, 3 , 4 ,5]
let newArr = arr.map(num => {
return num * 2
})

console.log(newArr) // [2,4,6,8,10]

这里的 map 函数就是我们的执行过程,map 函数中的参数(数组),就是我们算法的具体实现过程。两个是分离的,你也可以在 map 函数中实现其他逻辑,你也可以将这个实现过程放在其他地方执行。

从这个例子我们也可以看出声明式编程能更好的提高代码的可读性和健壮性,同时也能更方便进行重构。

在声明式编程中,开发者的重中之重不是如何去实现(How),而是定义好你想要得到是什么(What,然后你的每一步实现,都是围绕着这个(What)去实现的。

参考资料:

  1. 声明式编程和命令式编程的比较:本文讲的非常好,仅前面几节就把声明式编程和命令式编程的区别描述的很清楚;
  2. 从年会看声明式编程(Declarative Programming)-程墨Morgan:本文用年会这个例子介绍了什么是声明式编程及其工作方式;

最好先看资料2,在看资料1,会更加清楚。

初涉渐进式Web应用(简介)

What is Progressive Web Apps?

在移动端,我们习惯于浏览和使用原生 App,而很少使用手机自带的 Web 浏览器,比如 iOSSafari。因为使用浏览器的话,我们还要输入网站地址,或者搜索到该网站,因为 Web App 不会像原生 App 一样出现在桌面上,这就是 Web App 的入口问题,而这也会让大部分用户望而却步。不仅如此,还存在一个更为重要的问题:网络延迟所造成数据加载问题,在原生 App 中,我们一打开应用就能看到操作界面,而 Web App 则不行,它必须要经过网络加载获取到 HTMLJSCSS 后,才能显示操作页面,这期间用户就要忍受网络加载时的白屏界面。

Docker Swarm 概念入门

Docker Swarm Mode 负责提供 Docker 容器集群服务, 内置了 kv 存储功能,提供了众多的新特性,比如:具有容错能力的去中心化设 计、内置服务发现、负载均衡、路由网格、动态伸缩、滚动更新、安全传输等。使得 Docker 原生的 Swarm 集群具备与 MesosKubernetes竞争的实力。

未待完续…

|