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的搭建比安卓简单多了,就不详细说了)

查看更多