react native checkbox tree
1.0.0
一个简单而优雅的 React Native 复选框树。使用react-native-vector-icons实现
npm install react - native - checkbox - tree -- save
或者
yarn add react - native - checkbox - tree
现在我们需要安装react-native-vector-icons。
npm install react - native - vector - icons -- save
或者
yarn add react - native - vector - icons
React-Native-Template-Components 一个漂亮的 React Native 模板。
道具 | 参数 | 是否需要 | 描述 |
---|---|---|---|
数据 | 大批 | 是的 | 数据是一个普通数组 |
文本字段 | 细绳 | 是的 | 从数据项中提取标签 |
子字段 | 细绳 | 是的 | 从数据项中提取子字段 |
选择时 | (项目[])=>无效 | 是的 | 选择回调 |
风格 | 视图样式 | 不 | 容器视图的样式 |
文本样式 | 文本样式 | 不 | 文本样式 |
图标大小 | 数字 | 不 | 自定义图标大小 |
图标颜色 | 细绳 | 不 | 自定义图标颜色 |
自动选择子项 | 布尔值 | 不 | 选择项目时自动选择子项,默认为 true |
自动选择父母 | 布尔值 | 不 | 选择所有子项时自动选择父项,默认为 true |
打开图标 | 元素 | 不 | 自定义打开图标。仅使用react-native-vector-icons |
关闭图标 | 元素 | 不 | 自定义关闭图标。仅使用react-native-vector-icons |
检查图标 | 元素 | 不 | 自定义检查图标。仅使用react-native-vector-icons |
取消选中图标 | 元素 | 不 | 自定义取消选中图标。仅使用react-native-vector-icons |
渲染项 | (item, isSelect, isOpen, onOpen, onClose, onSelect)=> 元素 | 不 | 从数据中获取一个项目并将其呈现到列表中 |
应用程序编程接口 | 描述 |
---|---|
清除 | 刷新数据 |
设置选定项 | 输入值是onSelect返回的结果 |
import React , { useEffect , useRef , useState } from 'react' ;
import { StyleSheet , Text , TouchableOpacity , View } from 'react-native' ;
import CheckboxTree from 'react-native-checkbox-tree' ;
import AntDesign from 'react-native-vector-icons/AntDesign' ;
import Ionicons from 'react-native-vector-icons/Ionicons' ;
const recursiveData = [
{
shopReportName : 'Name 1' ,
shopCode : '00001' ,
shopType : '2' ,
shopId : 1 ,
shopName : 'Name 1' ,
childs : [
{
shopReportName : 'Name 2' ,
shopCode : '00002' ,
shopType : '3' ,
shopId : 2 ,
shopName : 'Name 2' ,
childs : [
{
shopReportName : 'Name 3' ,
shopCode : '00003' ,
shopType : '4' ,
shopId : 3 ,
shopName : 'Name 3' ,
childs : [
{
shopReportName : 'Name 4' ,
shopCode : '00004' ,
shopType : '4' ,
shopId : 4 ,
shopName : 'Name 4' ,
} ,
{
shopReportName : 'Name 5' ,
shopCode : '00005' ,
shopType : '4' ,
shopId : 5 ,
shopName : 'Name 5' ,
childs : [
{
shopReportName : 'Name 6' ,
shopCode : '00006' ,
shopType : '4' ,
shopId : 7 ,
shopName : 'Name 6' ,
childs : [
{
shopReportName : 'Name 7' ,
shopCode : '00007' ,
shopType : '4' ,
shopId : 7 ,
shopName : 'Name 7' ,
} ,
] ,
} ,
] ,
} ,
{
shopReportName : 'Name 8' ,
shopCode : '00008' ,
shopType : '4' ,
shopId : 8 ,
shopName : 'Name 8' ,
} ,
] ,
} ,
] ,
} ,
] ,
} ,
] ;
export interface Props { }
const CheckboxTreeScreen : React . FC < Props > = _props = > {
const [ data ] = useState < any [ ] > ( recursiveData ) ;
const ref : any = useRef ( ) ;
useEffect ( ( ) => {
if ( ref && ref . current ) {
ref . current . setSelectedItem ( [
{
shopReportName : 'Name 1' ,
shopCode : '00001' ,
shopType : '2' ,
shopId : 1 ,
shopName : 'Name 1' ,
} ,
{
shopReportName : 'Name 2' ,
shopCode : '00002' ,
shopType : '3' ,
shopId : 2 ,
shopName : 'Name 2' ,
} ,
] ) ;
}
} , [ ref ] ) ;
return (
< View style = { styles . container } >
< CheckboxTree
ref = { ref }
data = { data }
textField = "shopName"
childField = "childs"
textStyle = { { color : 'black' } }
iconColor = "black"
iconSize = { 26 }
openIcon = { < AntDesign name = "arrowdown" size = { 26 } /> }
closeIcon = { < AntDesign name = "arrowright" size = { 26 } /> }
renderItem = { ( { item , isSelect , isOpen , onOpen , onClose , onSelect } ) => (
< View style = { styles . wrapItem } >
{ isOpen ? (
< TouchableOpacity onPress = { onClose } >
< AntDesign size = { 30 } name = "arrowright" />
</ TouchableOpacity >
) : (
< TouchableOpacity onPress = { onOpen } >
< AntDesign size = { 30 } name = "arrowdown" />
</ TouchableOpacity >
) }
< TouchableOpacity onPress = { onSelect } >
< Ionicons
size = { 26 }
name = { isSelect ? 'checkbox-outline' : 'square-outline' }
/>
</ TouchableOpacity >
< Text style = { styles . name } > { item . shopName } </ Text >
</ View >
) }
onSelect = { item => {
console . log ( `Selected ${ item . length } item` ) ;
} }
/>
</ View >
) ;
} ;
export default CheckboxTreeScreen ;
const styles = StyleSheet . create ( {
container : {
flex : 1 ,
padding : 20 ,
} ,
wrapItem : {
flexDirection : 'row' ,
alignItems : 'center' ,
marginVertical : 8 ,
} ,
icon : {
marginHorizontal : 8 ,
} ,
name : {
fontSize : 20 ,
marginLeft : 8 ,
} ,
} ) ;
import React from 'react' ;
import { StyleSheet , View } from 'react-native' ;
import CheckboxTree from 'react-native-checkbox-tree' ;
import AntDesign from 'react-native-vector-icons/AntDesign' ;
const recursiveData = [
{
shopReportName : 'Name 1' ,
shopCode : '00001' ,
shopType : '2' ,
shopId : 1 ,
shopName : 'Name 1' ,
childs : [
{
shopReportName : 'Name 2' ,
shopCode : '00002' ,
shopType : '3' ,
shopId : 2 ,
shopName : 'Name 2' ,
childs : [
{
shopReportName : 'Name 3' ,
shopCode : '00003' ,
shopType : '4' ,
shopId : 3 ,
shopName : 'Name 3' ,
childs : [
{
shopReportName : 'Name 4' ,
shopCode : '00004' ,
shopType : '4' ,
shopId : 4 ,
shopName : 'Name 4' ,
} ,
{
shopReportName : 'Name 5' ,
shopCode : '00005' ,
shopType : '4' ,
shopId : 5 ,
shopName : 'Name 5' ,
childs : [
{
shopReportName : 'Name 6' ,
shopCode : '00006' ,
shopType : '4' ,
shopId : 7 ,
shopName : 'Name 6' ,
childs : [
{
shopReportName : 'Name 7' ,
shopCode : '00007' ,
shopType : '4' ,
shopId : 7 ,
shopName : 'Name 7' ,
} ,
] ,
} ,
] ,
} ,
{
shopReportName : 'Name 8' ,
shopCode : '00008' ,
shopType : '4' ,
shopId : 8 ,
shopName : 'Name 8' ,
} ,
] ,
} ,
] ,
} ,
] ,
} ,
] ;
const CheckboxTreenScreen = _props => {
return (
< View style = { styles . container } >
< CheckboxTree
data = { recursiveData }
textField = "shopName"
childField = "childs"
textStyle = { { color : 'black' } }
iconColor = "black"
iconSize = { 26 }
openIcon = { < AntDesign name = "arrowdown" size = { 26 } /> }
closeIcon = { < AntDesign name = "arrowright" size = { 26 } /> }
checkIcon = { < View /> }
unCheckIcon = { < View /> }
renderItem = { item => (
< View style = { styles . wrapItem } >
< AntDesign
style = { styles . iconItem }
name = "folderopen"
size = { 20 }
/>
< Text style = { styles . text } > { item . shopName } </ Text >
</ View >
) }
onSelect = { item => {
console . log ( `Selected ${ item . length } item` ) ;
} }
/>
</ View >
) ;
} ;
export default CheckboxTreenScreen ;
const styles = StyleSheet . create ( {
container : {
flex : 1 ,
paddingVertical : 40 ,
} ,
wrapItem : {
flexDirection : 'row' ,
marginVertical : 8
} ,
text : {
fontSize : 18
} ,
iconItem : {
marginHorizontal : 8
}
} ) ;