install nvm

1

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.36.0/install.sh | bash

or

1

wget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/v0.36.0/install.sh | bash

设置环境变量

1
2

export NVM_DIR="$([ -z "${XDG_CONFIG_HOME-}" ] && printf %s "${HOME}/.nvm" || printf %s "${XDG_CONFIG_HOME}/nvm")"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh" # This loads nvm

前言

echarts是百度前端团队推出的一个非常强大的开源图表库，我最近在重构的一个内部后台系统也用到了echarts，但是梳理老代码的时候发现有人居然改了node_modules/echarts里面的代码😢。梳理了一下功能，其实当时的需求就只想把“保存图片”的那个按钮的逻辑改为下载excel（也不知道为什么产品要在这个位置放导excel的按钮…）。

最近在做RN项目的时候，有一个旋转效果需要指定非元素中心的原点。我们都知道在CSS3里进行transform变换的时候，默认的变换原点是元素的中心位置，css3提供了transform-origin属性来设置变换原点，但是在RN里，我翻遍了官方文档和一些源码都没有看到可以在设置类似transform-origin东西，但是RN的transform支持 matrix。

一个使用矩阵实现缩放的栗子

将图片旋转放大2倍，我们用matrix实现

最近学习了一下react-native zIndex 属属性的用法，在没有用它之前一直觉得这没啥嘛，以为就和css里面的z-index一样的, 用了才知道他们不尽相同，因为我最初想通过它来实现引导效果的。

现在完成的效果长这样：(请将就一下丑陋的demo页面…😊)

在React-Native里面，如果要改变组件的样式可以通过state 或者 props来做到。但有些时候由于性能瓶颈，不得不放弃通过触发render的方式来改样式，而是通过setNativeProps 来直接更改原生组件的样式属性 来达到相同的效果。如下图：

上图中的header渐变和搜索框出现都是直通过setNativeProps来实现的。因为header要响应滚动事件，如果使用setState来实现的话，那么render会被频繁的触发，动画会比较卡顿，所以这种情况下，setNativeProps就能派上用场了。

现在什么 AOP 编程在前端领域越来越被大家追捧，所以我也来探究一下如何在javascript中进行AOP编程。 装饰器无疑是对AOP最有力的设计，在es5 时代，可以通过 Object.defineProperty来对对象属性／方法 进行访问修饰，但用起来需要写一堆东西。现在decorator已经在ES7的提案中了，借助Babel等转码工具，我们现在也能在javascript中使用装饰器语法了！

阅读全文 »

使用react-native也有一段时间了，这个框架使用起来还是有利有弊的。 首先来说web开发者用rn写native app 还是很方便的，至少不用为iOS， android写两套代码，如果开发者有reactjs开发经验的话，那学习成本又降低了不少。其实在RN 应用里还是会不可避免的写区分平台的代码，但这基本上已经降低到需求层面了，所以不是什么大问题，我们知道rn官方提供的某些组件是有平台区分的，所以我们在选用官方组件的时候应该尽量避免有平台差异的组件或者功能，除非你的需求就是要在不通平台上面展示不同的组件。
下面纪录一些我在项目中遇到的问题以及解决办法:

在web页面中展示图片或者其他平面图形是很容易的。但是当涉及到展示3D图形时就显得不是那么的容易了，因为3D几何体比2D的更为复杂。要做到这一点的话，你可以使用专门的技术和库比如webGL和three.js来实现。
当然，如果你只是想显示一些基本的形状(比如立方体)，这些技术并不是必须的。并且，这些技术和库并不能帮助你理解它们是如何生效的以及我们应该怎样在屏幕上绘制3D形状。
本教程的目的是教我们在web中并且不使用webGL技术应该如何够制作一个简单的3D引擎。首先，我们看看如何来存储3D形状，然后，我们分别在两种视图中如何来显示这些形状。