在 React Native 开发中，经常需要使用 checkbox 组件，但是系统提供的 checkbox 组件样式较为简单。此时，npm 包 react-native-easy-checkbox 可以帮助我们实现更美观的 checkbox 样式。本篇文章将详细介绍该包的使用方法。
安装
在项目根目录中使用以下命令进行安装：
npm install react-native-easy-checkbox --save
使用
react-native-easy-checkbox 包提供了两种类型的 checkbox：圆形和方形。以下分别介绍它们的使用方法。
圆形 checkbox
首先，需要在代码中引入 react-native-easy-checkbox 包：
import React from 'react';
import { View } from 'react-native';
import Checkbox from 'react-native-easy-checkbox';然后，就可以在需要使用的地方调用 Checkbox 组件了。例如，我们在一个表单中使用 checkbox：
-- -------------------- ---- -------
------ ------- ----- ---- ------- --------------- -
------------------ -
-------------
---------- - -
-------- ------
--
-
---------------- -
----------------------- --------
-
-------- -
----- - ------- - - -----------
------ -
------
---------
-----------------
----------------- -- ------------------------
--
-------
--
-
-上面的代码中，我们创建了一个 Form 组件，其中包含一个圆形 checkbox。当 checkbox 被选中时，我们将改变 Form 组件的状态，并将状态传递给 Checkbox 组件。
方形 checkbox
使用方形 checkbox 与圆形 checkbox 相似。只需将 Checkbox 组件的 type 属性设置为 'square' 即可。
<Checkbox
type="square"
checked={checked}
onChange={checked => this.onChecked(checked)}
/>高级用法
react-native-easy-checkbox 包还提供了自定义样式和自定义图标的功能。以下分别介绍它们的使用方法。
自定义样式
使用 style 属性可以自定义 checkbox 样式。例如，我们可以修改 checkbox 的大小、颜色等属性：
-- -------------------- ---- -------
---------
--------
------------ --
------------ -------
------------- ---
---------------- ------
--
-----------------
----------------- -- ------------------------
--上面的代码中，我们设置了 checkbox 的边框宽度为 3，边框颜色和背景色均为白色，圆角半径为 10。
自定义图标
使用 icon 属性可以自定义 checkbox 图标。例如，我们可以使用自定义的图标代替默认的选中和未选中图标：
<Checkbox
icon={{
checked: require('./checked.png'),
unchecked: require('./unchecked.png')
}}
checked={checked}
onChange={checked => this.onChecked(checked)}
/>上面的代码中，我们通过 require 函数引入了自定义的图标文件 checked.png 和 unchecked.png，并将它们传递给了 Checkbox 组件的 icon 属性。
总结
本篇文章介绍了如何安装和使用 react-native-easy-checkbox 包，并介绍了自定义样式和自定义图标的高级用法。通过本文的学习，读者可以更加灵活地使用 checkbox 组件，增加项目的美观性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600562e881e8991b448e0939