骨骼动画的几个小技巧

1. 所有的骨骼都是需要有父级骨骼
2. 画骨骼时，默认是下级，要重新指定父级时，可以先点一下父级再画
3. 不是所有图片都需要骨骼，也不是所有骨骼都需要设置IK
4. IK只能在一根或者两根骨骼上生效，其运动路径是唯一的

composer 怎么从国内镜像恢复到国外镜像去

这种情况下可以试试 Laravel China 维护的 全量镜像。

使用 Composer 镜像加速有两种选项：

选项一：全局配置，这样所有项目都能惠及（推荐）；
选项二：单独项目配置；

$ composer config -g repo.packagist composer https://packagist.laravel-china.org

如果仅限当前工程使用镜像，去掉 -g 即可，如下：

$ composer config repo.packagist composer https://packagist.laravel-china.org

composer config -g --unset repos.packagist

33233333333333

3333333333

222222222

111111111

今天有个需求， 直接支持web端预览word，excel等文件， 查了一下很多写的比较麻烦， 这里找到一种简单的方式：

http://view.officeapps.live.com/op/view.aspx?src=

src后面填写你上传的文件地址， 例如：https://view.officeapps.live.com/op/view.aspx?src=http://opd9w8mwo.bkt.clouddn.com/%E6%B5%8B%E8%AF%95%E6%96%87%E6%A1%A3.docx

很简单，Office都为我们做好了， 我们只需要添加一个sourceUrl就可以了。

具体的文档：https://blogs.office.com/2013/04/10/office-web-viewer-view-office-documents-in-a-browser/

方糖Dapp社区公测通知，请使用微信扫码关注后订阅。

React 添加 sass 支持

https://github.com/buzhanguo/react-app-rewire-sass-modules

React native  启用修饰符

安装 Babel 插件 

yarn add --dev babel-plugin-transform-decorators-legacy

然后修改 .babelrc

{
  "presets": ["react-native"],
  "plugins": ["transform-decorators-legacy"]
}

使用 react-native-camera 一定要按文档把 Grade 升级到 3.x 不然到处报错 

 https://github.com/react-native-community/react-native-camera/blob/master/docs/GradleUpgradeGuide.md

如果在输入内容时，键盘挡住了输入框，可以用 ScrollView 包裹到最外边，这样在键盘推上来时，界面会自动向上滚动。

react-native-ui-lib 的 textInput 有一个 floatingPlaceholder 属性，设置为 true 的话，会在有值是自动浮起，解决了用 PlaceHolder 当标题的问题。很好用：

<TextInput placeholder="转入地址" onChangeText={(text)=>{this.handleChange(text,"to");}} value={this.state.to}  floatingPlaceholder={true}/>

从交易信息中恢复 publickey 

/**
 * ECDSA public key recovery from signature
 * @param {Buffer} msgHash
 * @param {Number} v
 * @param {Buffer} r
 * @param {Buffer} s
 * @return {Buffer} publicKey
 */
exports.ecrecover = function (msgHash, v, r, s) {
  var signature = Buffer.concat([exports.setLength(r, 32), exports.setLength(s, 32)], 64)
  var recovery = v - 27
  if (recovery !== 0 && recovery !== 1) {
    throw new Error('Invalid signature v value')
  }
  var senderPubKey = secp256k1.recover(msgHash, signature, recovery)
  return secp256k1.publicKeyConvert(senderPubKey, false).slice(1)
}

关于 web3.js 保存钱包时报错：

{ [Error: Secure random number generation is not supported by this browser.

修改 web3-eth-accounts/src/index.js 34行，将

var cryp = (typeof global === 'undefined') ? require('react-native-crypto') : require('crypto');

改为

var cryp = require('react-native-crypto');

即可。

如果要保存钱包，需要在 global 里兼容下 localStorage，方法是在 globals.js 中加入

global.localStorage = require('react-native-sync-localstorage');

Styled Component 使用用户定义组件

我们知道 SC 调用系统组件是这样的：

const ContainerBox = styled.View`
    background-color:red;
    height:100%;
    display:flex;
`;

但如果我们想复用我们定义好的组件，按这个写法就会报错。这时候我们只需要简单修改下语法：

const LogoIcon = styled( Icon )`
    color:#20A0FF;
`;

把 . 换成 () 就好了 😋 

React Native 使用 SVG 作为图标 

在方糖全栈课里边我们讲了如何通过 react-native-vector-icons 来引入字体图标，但是并没有讲到如何使用自己创造的 SVG 图案。

一 创造 SVG 图案

使用 Sketch 、 AI 和 AD 等矢量绘图软件都可以创造自己想要的矢量图案，并导出为 SVG 格式。

以 Sketch 为例，选中想要输出为 SVG 格式的图像层，然后 在右下角 make exportable 后，选中 svg 格式即可。

二 导入 IcoMoon 生成字体

虽然 React Native 是支持 SVG 显示的，但我们可以通过把一类矢量图形做成一个字体方式来更好的管理。

访问 IcoMoon ，点击 import Icons 把刚才到处的 SVG 导入进去。

然后点右下角的 Generate Font 。将生成的字体 Zip 文件下载下来。

三 导入 React Native

将 Zip 解压后，放到项目下根下，改名为 fonts 吧。

然后

import { createIconSetFromIcoMoon } from 'react-native-vector-icons';
import icoMoonConfig from '../fonts/selection.json';
const Icon = createIconSetFromIcoMoon(icoMoonConfig);

这样我们的图案就被载入了。需要使用的时候和字体一样：

<Icon name="logo" size={100}/>

之后只要不停的去更新 fonts 下 IcoMoon 生成的字体文件就能不断添加图标了。这样的好处是所有的图标都在字体里边。开发和设计流程中只要分享下字体，图标就全了。

PS:  zip 包中的 ttf 字体文件需要复制一份到 android/app/src/main/assets/fonts 。这个目录可能不存在，build 一次后会出来。🍩

flex 垂直居中

 justify-content:center;
 align-items:center;

React Native 调用 Web3（1.x） 的正确姿势

1 创建项目

react-native init lm1
cd lm1

2 安装依赖包

yarn add node-libs-browser

3 创建 rn-cli.config.js 脚本

const extraNodeModules = require('node-libs-browser');

module.exports = {
  extraNodeModules,
};

4 创建 global.js ，引入公用包

global.Buffer = require('buffer').Buffer;
global.process = require('process');

if (typeof btoa === 'undefined') {
    global.btoa = function (str) {
      return new Buffer(str, 'binary').toString('base64');
    };
  }
  
  if (typeof atob === 'undefined') {
    global.atob = function (b64Encoded) {
      return new Buffer(b64Encoded, 'base64').toString('binary');
    };
  }

5 在 app.js 中引入 global

import './global';

6 安装 babel-preset-es2015

yarn add --dev babel-cli babel-preset-es2015

安装加密用包

yarn add react-native-crypto react-native-randombytes

安装兼容工具

yarn add --dev tradle/rn-nodeify

link

react-native link 

生成兼容js

./node_modules/.bin/rn-nodeify --hack --install

然后在 App.js 中引入

import './shim.js'
import crypto from 'crypto'

7 安装 web3

yarn add web3

8  调用 web3 

import Web3 from 'web3';


...

componentWillMount() {
    const web3 = new Web3(
      new Web3.providers.HttpProvider('https://mainnet.infura.io/')
    );
  
    web3.eth.getBlock('latest').then(console.log)
  }

9 启动日志

react-native log-android

10 运行应用

react-native run-android

如果报错

added 120 packages from 133 contributors, removed 95 packages and updated 1064 packages in 156.737s
/Users/Easy/Playground/lm1/node_modules/rn-nodeify/cmd.js:74
      if (err) throw err
               ^

Error: ENOENT: no such file or directory, open '/Users/Easy/Playground/lm1/node_modules/rn-nodeify/shim.js'

报错以后怎么办呢？

react-native link

然后 重新装 rn-nodefiy

yarn add --dev tradle/rn-nodeify

再运行

./node_modules/.bin/rn-nodeify --hack --install

这一次终于可以在根目录下成功生成 shim.js 了。

PS： windows下还要装 python 和 vcbuild.exe 一堆东西…… 我电脑装不下VS了……自行测试吧 🙃