1. Installation of third party components

GitHub: https://github.com/crazycodeboy/react-native-check-box

Install under the command line of ReactNative project

npm i react-native-check-box –save

2. Encapsulation of local control

2.1 import and constant definitions, which can be adjusted according to the project

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import {
    StyleSheet,
    View,
    Text,
    Image,
} from 'react-native';

import CheckButton from 'react-native-check-box';
import { setSpText, scaleSize } from './../core/screen-util';
import { textFontSize, textColor } from './../config/genericStyle';

const ICON_CHECKED = require('./../../image/icon_checkedbox.png');
const ICON_UNCHECKED = require('./../../image/icon_uncheckedbox.png');

2.2 component code

The used styles can be added by themselves, which can support left text and right text. Currently, they are right text

export default class CheckBox extends Component {
    constructor(props) {
        super(props);
    }

    onClick(data) {
        data.checked = !data.checked;
        this.props.onClick(data);
    }

    renderRightText(data) {
        return (<Text style={styles.rightText}>{data.text}</Text>);
    }

    render() {
        let data = this.props.data;
        return (
            <CheckButton
                style={{ padding: scaleSize(8) }}
                onClick={() => this.onClick(data)}
                isChecked={data.checked}
                rightTextView={this.renderRightText(data)}
                checkedImage={<Image source={ICON_CHECKED} style={styles.image} />}
                unCheckedImage={<Image source={ICON_UNCHECKED} style={styles.image} />}
            />);
    }
}

3. Demo

Using the currently encapsulated CheckBox component, the necessary parameters are as follows

parameter	type	describe
data	object	Example: {'text': 'testcheckbox', 'checked': false}
onClick	function	Click the callback of multiple selection box, and the data object after the checked switch will be returned when the callback is executed

A simple example:

...
import CheckBox from './../../lib/component/checkbox';
...
    onChecked(data) {
        console.log('click : ' + JSON.stringify(data));
    }

    render() {
        let data = [{ 'text': 'testcheckbox', 'checked': false }, { 'text': 'checkbox2', 'checked': false }];
        return (
            <View style={{ flexDirection: 'row' }}>
                <CheckBox data={data[0]} onClick={this.onChecked.bind(this, data[0])} />
                <CheckBox data={data[1]} onClick={this.onChecked.bind(this, data[1])} />
            </View>
        );
    }
...