react native checkbox tree
1.0.0
Un árbol de casillas de verificación simple y elegante para React Native. Implementado usando reaccionar-native-vector-icons
npm install react - native - checkbox - tree -- saveo
yarn add react - native - checkbox - treeAhora necesitamos instalar reaccionar-native-vector-icons.
npm install react - native - vector - icons -- saveo
yarn add react - native - vector - icons react-native-template-components Una hermosa plantilla para React Native.
| Accesorios | parámetros | esrequerir | Descripción |
|---|---|---|---|
| datos | Formación | Sí | Los datos son una matriz simple |
| campo de texto | Cadena | Sí | Extraiga la etiqueta del elemento de datos. |
| camponiño | Cadena | Sí | Extraiga los hijos del campo del elemento de datos. |
| en Seleccionar | (elemento[])=> nulo | Sí | Devolución de llamada de selección |
| estilo | Estilo de vista | No | Estilo para vista de contenedor |
| estilo de texto | Estilo de texto | No | Estilo para texto |
| Tamaño del icono | Número | No | Personalizar el tamaño del icono |
| iconoColor | Cadena | No | Personalizar el color del icono |
| autoSelectNiños | Booleano | No | Seleccionar niños automáticamente al seleccionar un elemento, el valor predeterminado es verdadero |
| autoSelectParents | Booleano | No | Seleccionar padre automáticamente cuando se seleccionan todos los hijos, el valor predeterminado es verdadero |
| abrirIcono | Elemento | No | Personaliza el icono de abrir. Solo usando iconos vectoriales nativos de reacción |
| cerrarIcono | Elemento | No | Personalizar el icono de cerrar. Solo usando iconos vectoriales nativos de reacción |
| comprobarIcono | Elemento | No | Personalizar el icono de verificación. Solo usando iconos vectoriales nativos de reacción |
| desmarcarIcono | Elemento | No | Personaliza el icono de desmarcar. Solo usando iconos vectoriales nativos de reacción |
| renderitem | (elemento, isSelect, isOpen, onOpen, onClose, onSelect)=> Elemento | No | Toma un elemento de los datos y lo representa en la lista. |
| API | Descripción |
|---|---|
| claro | Actualizar datos |
| establecer elemento seleccionado | El valor de entrada es el resultado devuelto por 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
}
} ) ;
