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

    showqrcode.jpeg

  • React native  启用修饰符

    安装 Babel 插件 

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


    然后修改 .babelrc

    {
      "presets": ["react-native"],
      "plugins": ["transform-decorators-legacy"]
    }
    
  • 如果在输入内容时,键盘挡住了输入框,可以用 ScrollView 包裹到最外边,这样在键盘推上来时,界面会自动向上滚动。

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

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

    Screen Shot 2018-05-30 at 10.39.03 AM.png

  • 从交易信息中恢复 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 格式。

    Screen Shot 2018-05-28 at 12.20.27 PM.png

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

    二 导入 IcoMoon 生成字体

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

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

    Screen Shot 2018-05-28 at 12.23.11 PM.png

    然后点右下角的 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了……自行测试吧 🙃

  • 使用国内镜像加速npm和yarn
  • ubuntu 安装 微软字体: 


    apt-get install ttf-mscorefonts-installer
  • 参考阅读·方糖实战录·动图小工厂

    1. Parcel 官方网站 
    2. BootCDN 前端项目列表页 http://www.bootcdn.cn/all/
    3. FabricJS 官方网站 http://fabricjs.com/
    4. Gif.js 项目主页 https://github.com/jnordberg/gif.js
  • parcel 使用相对路径:

    parcel build index.html  --public-url ./
    
  • Ubuntu 全自动安装雅黑字体( from  http://www.cnblogs.com/Dylansuns/p/7648002.html  )

    wget -O get-fonts.sh.zip http://files.cnblogs.com/DengYangjun/get-fonts.sh.zip
    unzip -o get-fonts.sh.zip 1>/dev/null
    chmod a+x get-fonts.sh
    ./get-fonts.sh

    删除下载的字体安装脚本文件:

    rm get-fonts.sh get-fonts.sh.zip 2>/dev/null

    恢复以前的字体设置:

    cd /etc/fonts/conf.avail
    sudo mv 51-local.conf.old 51-local.conf 2>/dev/null
    sudo mv 69-language-selector-zh-cn.conf.old 69-language-selector-zh-cn.conf 2>/dev/null
    sudo rm -f -r /usr/share/fonts/truetype/myfonts 2>/dev/null
    cd -
  • Mac 去掉一个 ip 变更的域名

    ssh-keygen -R  old.ftqq.com
    
  • Ubuntu 语言包错误修正

    perl: warning: Setting locale failed.perl: warning: Please check that your locale settings:    LANGUAGE = (unset),    LC_ALL = (unset),    LC_MESSAGES = "zh_CN.UTF-8",    LANG = "zh_CN.UTF-8"    are supported and installed on your system.perl: warning: Falling back to the standard locale ("C").

    安装本地化管理器

    sudo apt-get install localepurge

    以后再次配置用下边的命令

    sudo dpkg-reconfigure localepurge

    然后生成

    sudo locale-gen zh_CN.UTF-8 en_US.UTF-8

    通过 terminal 指定语言

    export LC_ALL="en_US.UTF-8"

    嫌麻烦可以放到启动脚本里边。

  • Ubuntu 16.04 安装 wkhtmltopdf

    不要通过apt-get 安装,版本太旧了。直接到这里下载编译好12.0.4版本,默认支持 headless 。

    找个地方解压:

    tar xvf wkhtmltox-0.12.4_linux-generic-amd64.tar.xz 

    然后运行:

    解压目录/wkhtmltox/bin/wkhtmltopdf  abc.html abc.pdf 

    就OK了。

    字体配置见下文。

    安装主程序

    sudo apt-get install wkhtmltopdf

    安装完成就可以运行了,但是因为是在服务器环境下,没有连接显示器,所以会报错:

    QXcbConnection: Could not connect to display 
    Aborted (core dumped)

    安装 xvfb

    sudo apt-get install xvfb

    然后把之前的

    wkhtmltopdf 5ae26f0a9b186.html 5ae26f0a9b186.pdf

    改为

    xvfb-run wkhtmltopdf 5ae26f0a9b186.html 5ae26f0a9b186.pdf

    上边的错误就消失了。

    字体配置

    但是会出现字体错误提示:

    Fontconfig warning: "/etc/fonts/conf.d/51-local.conf", line 128: Having multiple <family> in <alias> isn't supported and may not work as expected
    


    找到128行对应的部分:

    <!--
          Serif faces
        -->
            <alias>
                    <family>Cambria</family>
                    <family>Constantina</family>
    
                    <family>SimSunNew</family>
                    <family>宋体New</family>
                    <family>PMingLiUNew</family>
                    <family>新細明體New</family>
                    <default>
                            <family>serif</family>
                    </default>
            </alias>
    
       <!--
          Monospace faces
        -->
            <alias>
                    <family>Consolas</family>
                    <family>Courier New</family>
                    <default>
                            <family>monospace</family>
                    </default>
            </alias>
    


    改为

    <!--
          Serif faces
        -->
            <alias>
                    <family>Cambria</family>
                    <default><family>serif</family></default>
            </alias>
            <alias>        
                    <family>Constantina</family>
                    <default><family>serif</family></default>
            </alias>
            <alias>  
                    <family>SimSunNew</family>
                    <default><family>serif</family></default>
            </alias>
            <alias>
                    <family>宋体New</family>
                    <default><family>serif</family></default>
            </alias>
            <alias>
                    <family>PMingLiUNew</family>
                    <default><family>serif</family></default>
            </alias>
            <alias>
                    <family>新細明體New</family>
                    <default><family>serif</family></default>
            </alias>
            
    
       <!--
          Monospace faces
        -->
            <alias>
                    <family>Consolas</family>
                    <default><family>monospace</family></default>
            </alias>
            <alias>
                    <family>Courier New</family>
                    <default><family>monospace</family></default>
            </alias>
    
微博一键登入