React-Native 中自定义checkbox组件

感觉有一段时间没写东西了,原因是从年初来了后,公司开展了移动端的业务,用的是React-native 这个前端框架,所以这段时间一直很忙,需要去研究 React的Api、语法、兼容性、难点突破等等。

这次给大家分享一下 React中 ListView这个组件以及全选和单选按钮的封装使用。当然核心部分还是讲解自定义封装的 checkbox 组件!
React 有一个优势就是组件的复用性特别高,在原生组件中,官方并没有向我们提供checkbox这样的多选或单选的组件,因此需要我们自己去封装。

checkbox组件封装

准备条件

若我们需要在列表的右侧展现checkbox那样的复选框,一般在网页中会有自带的checkbox标签元素,那在react中我们需要用图片或者字体图标来实现checkbox样式的显示,当然也可以通过样式来控制

  • 字体图标方式
    在此我们需要通过npm的方式去安装 字体图标的依赖包,传送门 点我点我

    1
    2
    3
    4
    5
    6
    7
    8
    npm install react-native-vector-icons --save

    安装完毕后,我们通过require的方式,将包导入进来,如下
    var Icon=require('react-native-vector-icons/FontAwesome');

    render(){
    return <Icon name='square-o' size={16} style={styles.checkbox} color="#00B4F7" ></Icon>
    }
  • 图片方式
    这种就比较简单了,直接用原生的Image组件去加载本地的资源图片就可以了,设计好checkbox 选中和未选中两张图片,通过state去切换图片的source属性。

    1
    2
    3
    4
    5
    var sourceUrl = require('image!selected');
    if(this.state.checked){
    sourceUrl = require('image!unselected');
    }
    <Image source={sourceUrl}></Image>

查看更多

React-Native 环境搭建指南[阿鹏出品]

React 工作原理

因为公司业务的需要,不得不开始研究react-native,至于react有哪些优势呢,网上已经一大堆分析了,我就不多啰嗦了,目前这玩意是要征服三端啊,PC、IOS、安卓!如此甚火,诸多公司都开始广泛使用起来,小弟也是废了一番周折,才把环境搭建起来,DEMO跑起来。一个感受是:坑太多了,环境搭建真麻烦。。。下面给大家分享下搭建流程(这里主要是windows环境下搭建安卓,至于IOS的搭建比安卓简单多了,就不详细说了)

查看更多

这一年

让我缓一缓,起笔写之前,我感觉我心脏不好,有点慌!这什么鬼啊,又到2015年的31号了。。。我还没来得及迎接你,你就突然来了。。。

我先静下来,想想这一年发生了什么??

  • 二胎政策?
  • 晚婚假日取消?
  • 新版人民币(土豪金)
  • 习大大访英?
  • 股市奇迹(千股跌停)
  • 屠呦呦获诺贝尔奖
  • 人民币贬值。。
    ……..

NO NO NO,这不是对我自己的总结

好吧,还是用几个关键词 扯一扯这悲催的2015年吧 (算不上总结,就是一篇与大家沟通聊天的流水账,滚相册的方式,原谅下面出现过多的图片,因为本人表达能力有限!!!)

查看更多

阿鹏 细说highmaps

最近发现用highmaps的用户越来越多,都分分加入到QQ群和微信来咨询我 (容我打个广告,鹏吧技术群:86031665,(^__^) ),之前写过一篇highmaps的文章,没看过的,请移步至 如何使用highmaps,点击此处传送门 ,那么今天又写这篇文章的目的是综合了许多朋友的疑问,为大家在详细说下highmaps的一些具体用法和细节问题。

疑问

基本大家提的最多的问题如下:

  • 如何正确引用highmaps文件?
  • 如何给highmaps初始化赋值及钻取城市赋值?
  • 如何点击省份向下钻取?
  • 如何给向下钻取的城市动态添加点击事件?
  • 如何点击省份后不是向下钻取,而是在其右侧独立展示省份的地图?

带着这些疑问我下面就为大家具体谈谈。。。

查看更多

highstock 新属性及进阶用法

highstock V2.19 新属性介绍

ordinal :In an ordinal axis, the points are equally spaced in the chart regardless of the actual time or x distance between them. This means that missing data for nights or weekends will not take up space in the chart. Defaults to true.

以上是官方给出的解释,大概说的什么意思呢,用我自己的话理解就是 “在X轴上所有的点都是按时间或者距离等比分配的,这就意味着没有出现的点或者后来延迟加进来的点不会占用掉x轴上的位置和空间”,接下来我们就通过例子和demo讲解。

之前我写过一篇文章highstock分时图的开发,里面提到了这个问题,我们重新回顾一遍,在分时图的开发中,例如我们需要显示的是 早上 8:00到晚上20:00的数据,X轴每隔两小时显示一个label,若当前时间为9点,那么我们需要向服务端拿到8点至15点的数据,那么问题来了,我们会发现图表展示出来整个x轴就是8点到15点,而剩余15点到20点的x轴label并没有占得空间和位置,如下图所示:

查看更多

热点图的深入分析(2)

为了阅读的连续性,我还是尽快把《热点图的深入分析(2)》 写了,不然感觉会被大家嫌弃,没看(1)的小伙伴我送上地址:传送门

上一篇给大家介绍了热点图数据的收集,那这篇主要是给大伙讲解如何展现,就直接步入正题了


如何动态载入网页

我们需要将原始的网页加载到iframe中,然后用一个遮罩层盖住这个iframe,最后用canvas绘制出热图覆盖在这个上面。

1
2
3
4
5
6
7
8
9
<div id="overflowDiv">
<div id="heatmapArea">
<div id="maskDiv">
</div>
<p>
<iframe src="" id="webPageFrame" frameborder="0" name="webPageFrame" scrolling="no" width="1280"></iframe>
</p>
</div>
</div>

查看更多

创建 .bowerrc 文件 , 使用代理下载资源

最近学习reactjs,利用bower去管理相关的资源文件。但中途出现一个问题,由于我们本地办公电脑本身就是使用的代理才能上网,因此不能直接使用bower去下载插件。

于是在网上查找了一些方法,需要设置bower的代理,此时我们需要一个文件.bowerrc。需要在这个文件里配置相关的代理设置。开始以为.bowerrc 是一个 xxx.bowerrc 后缀的一个文件,于是在目录下手动建了一个类似的文件,发现没有用。

后来又搜寻一番,发现可以通过cmd命令去创建文件,于是试了一把果然成功了。分享给大伙,免得和我有一样遭遇的小伙伴烦恼

最后用任意编辑器打开 .bowerrc ,输入以下代理设置

1
2
3
4
{
"proxy": "http://192.168.20.6:3128",
"https-proxy": "http://192.168.20.6:3128"
}

大功告成,可以下载想要的东西啦

如何将phantomjs单独部署在服务端

hey,every one ,很久没给大家分享技术型的文章啦,今天抽时间来一发吧

一. 容我分析(lao dao)几句

之前写了2篇 highcharts 结合 phantomjs 后端生成图片的文章,
http://www.peng8.net/2014/07/21/render-charts-serverside/
http://www.peng8.net/2014/11/24/highchart-table-export-image-by-phantomjs/
第一篇呢,纯后端生成,动态生成json,并将json存在文件中,后端调用phantomjs.exe ,将生成的json文件传入 phantomjs 中。
第二篇呢,是通过前端触发,将页面上的渲染出来的图表和TABLE 整个一起生成一张图片,其实这种也可以放在后端执行。
以上2种方式,都会有个缺点,就是当生成的图片很多,或者请求页面很多时,我们要重复一次一次的去调用phantomjs.exe这个玩意,耗内存,耗时间,直到昨天突然有个群里的人问我,在服务端单独部署一个phantomjs.exe ,开启一个端口,它一直运行着,只要有请求发向它,它就生成一个base64的字符串返回回来,其实官方已经提供了将phantomjs.exe单独部署的方法,于是我研究了一番,最后分享给大家。好了,唠叨结束,接下来我们看看是如何实现的?

二. 服务端 Look here

我用.NET新建一个解决方案,里面包含了2个项目,一个web项目,另外一个是winform项目,当然你也可以弄2个web项目,不影响部署。

<1> 服务端phantomjs搭建

  1. 一些准备文件
    phantomjs.exehighcharts工具包
  2. winform界面写出来
    服务界面
  3. winform后端核心代码
    1
    #region 启动进程
      Process  p = new Process();
      p.StartInfo.FileName = Environment.CurrentDirectory + "//phantomjs//phantomjs_1.9V.exe";
     
      string ExcuteArg = Environment.CurrentDirectory + "//script//highcharts-convert.js -host 127.0.0.1 -port 3003";
      p.StartInfo.Arguments = string.Format(ExcuteArg);
      p.StartInfo.CreateNoWindow = false;
      p.StartInfo.UseShellExecute = false;
      //重定向标准输出 
      p.StartInfo.RedirectStandardOutput = true;
      //重定向错误输出 
      p.StartInfo.RedirectStandardError = false; ;
      p.StartInfo.WindowStyle = ProcessWindowStyle.Normal;
      string[] result = { };
      if (!p.Start())
      {
          throw new Exception("无法启动Headless测试引擎.");
      }
    
      result = p.StandardOutput.ReadToEnd().Split(new char[] { '\r', '\n' });
      if (result.Length == 0)
      {
          result[0] = "已成功启动,但无数据";
      }
      foreach (string s in result)
      {
          list_Msg.Items.Add(s);
      }
      #endregion

<2> web端搭建及如何调用phantomjs

  1. web页面搭建
    web界面
    实际上这个步骤可以省略,只是为了展示返回的数据而已,毕竟可以纯后端生成。
  2. 向phantomjs 发起post请求的核心代码

    1
    private string HttpPostNew(string Url, string postDataStr)
    {
        HttpWebRequest request = (HttpWebRequest)WebRequest.Create(Url);
        request.Method = "POST";
        request.ContentType = "application/x-www-form-urlencoded";
        request.ContentLength = Encoding.UTF8.GetByteCount(postDataStr);
       
        Stream myRequestStream = request.GetRequestStream();
        StreamWriter myStreamWriter = new StreamWriter(myRequestStream, Encoding.GetEncoding("gb2312"));
        myStreamWriter.Write(postDataStr);
        myStreamWriter.Close();
    
        HttpWebResponse response;
        try
        {
            response = (HttpWebResponse)request.GetResponse();
        }
        catch (WebException ex)
        {
            response = (HttpWebResponse)ex.Response;
        }
        Stream myResponseStream = response.GetResponseStream();
        StreamReader myStreamReader = new StreamReader(myResponseStream, Encoding.GetEncoding("utf-8"));
        string retString = myStreamReader.ReadToEnd();
        myStreamReader.Close();
        myResponseStream.Close();
    
        return retString;
    }
    1. 按钮的调用代码
      1
      string url = "http://localhost:3003/";
          string param= "{\"infile\":\"{ xAxis: { categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']},series: [{ data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]}]}; \",\"callback\":\"function(chart) { chart.renderer.arc(200, 150, 100, 50, -Math.PI, 0).attr({ fill: '#FCFFC5',stroke: 'black','stroke-width' : 1}).add(); } \",\"constr\":\"Chart\"}";
          TextBox1.Text= HttpPostNew(url, param);
          MemoryStream stream = new MemoryStream(Convert.FromBase64String(TextBox1.Text));
          Bitmap bmp = new Bitmap(stream);
          string randomName = System.DateTime.Now.ToString("yyyyMMddhhssmm") + ".png";
          string saveUrl = Server.MapPath("/images/")+randomName;
          bmp.Save(saveUrl, ImageFormat.Png);
          stream.Dispose();
          stream.Close();
          bmp.Dispose();
          Image1.ImageUrl = "~/images/"+ randomName;

三. 效果展示啦

最后将base64转换成图片


DEMO 下载地址 点我下载