@futurejj/反应- native-检查框

用于本地反应的纸质复选框

一个美丽的,可自定义的,和动画的复选框组件,用于React Industrial应用程序. 这个组件在iOS,Android,和Web平台之间工作,具有平滑动画和可访问性支持.

特征

• 关于状态变化的美丽动画
• 完全自定义的颜色和样式
• • 跨平台(iOS、Android、Web)
• 3个州:检查、检查和不确定
• * 内置无障碍支持
• 适应各种设计需要的自定义大小
• QQ 与 Expo 和标准 React 本地工作
• QQ TypeScript 支持完整类型定义

安装

yarn add @futurejj/react-native-checkbox
# or
npm install @futurejj/react-native-checkbox

图标依赖性

这个组件使用物质社区图标. 你需要安装任一:

• @expo/vector-icons (如果使用博览会-内置)
• react-native-vector-icons (如果使用 React 本地 CLI - 遵循安装指令 react-native-vector-icons(中文(简体) )

使用量

基本示例

import React, { useState } from 'react';
import { View } from 'react-native';
import { Checkbox } from '@futurejj/react-native-checkbox';

export default function CheckboxExample() {
  const [checked, setChecked] = useState(false);

  const toggleCheckbox = () => {
    setChecked(!checked);
  };

  return (
    <View style={{ padding: 20 }}>
      <Checkbox
        status={checked ? 'checked' : 'unchecked'}
        onPress={toggleCheckbox}
      />
    </View>
  );
}

自定义

<Checkbox
  status="checked" // 'checked', 'unchecked', or 'indeterminate'
  disabled={false} // disable the checkbox
  onPress={() => {}} // handle press events
  color="#6200ee" // color when checked
  uncheckedColor="#757575" // color when unchecked
  size={32} // customize size (default: 24)
  style={{ marginRight: 8 }} // additional styles for the container
/>

API 参考

道具

动画

复选框包括平滑动画 :

• 在状态间过渡时缩放动画
• 自定义更多互动的边框动画

无障碍

这一组成部分是在无障碍的基础上建立的:

• 适当的角色分配checkbox(中文(简体) )
• 向屏幕阅读器报告的正确状态
• 动态变化实时区域更新

捐款

见 贡献指南 学习如何为储存库和发展工作流程作出贡献.

许可证

麻省理工学院

* 支持项目

谢谢

• 模块使用 创建- 反应- 本土- 图书馆
• 受到重创 反应原生纸的复选框. 机器人 组件
• Readme 编辑时使用 泰波拉语Name