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>

查看更多

reactjs

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

React 工作原理

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

查看更多