react native checkbox tree
1.0.0
Ein einfacher und eleganter Kontrollkästchenbaum für React Native. Implementiert mit React-Native-Vector-Icons
npm install react - native - checkbox - tree -- saveoder
yarn add react - native - checkbox - treeJetzt müssen wir React-Native-Vector-Icons installieren.
npm install react - native - vector - icons -- saveoder
yarn add react - native - vector - icons React-Native-Template-Components Eine schöne Vorlage für React Native.
| Requisiten | Parameter | ist erforderlich | Beschreibung |
|---|---|---|---|
| Daten | Array | Ja | Daten sind ein einfaches Array |
| textField | Zeichenfolge | Ja | Extrahieren Sie die Beschriftung aus dem Datenelement |
| childField | Zeichenfolge | Ja | Extrahieren Sie die untergeordneten Felder aus dem Datenelement |
| onSelect | (item[])=> ungültig | Ja | Auswahlrückruf |
| Stil | ViewStyle | NEIN | Styling für die Containeransicht |
| textStyle | TextStil | NEIN | Styling für Text |
| iconSize | Nummer | NEIN | Passen Sie die Symbolgröße an |
| iconColor | Zeichenfolge | NEIN | Passen Sie die Symbolfarbe an |
| autoSelectChilds | Boolescher Wert | NEIN | Untergeordnete Elemente automatisch auswählen, wenn ein Element ausgewählt wird. Die Standardeinstellung ist „true“. |
| autoSelectParents | Boolescher Wert | NEIN | Übergeordnetes Element automatisch auswählen, wenn alle untergeordneten Elemente ausgewählt sind. Die Standardeinstellung ist „true“. |
| openIcon | Element | NEIN | Öffnen-Symbol anpassen. Es werden nur React-Native-Vektorsymbole verwendet |
| closeIcon | Element | NEIN | Schließen-Symbol anpassen. Es werden nur React-Native-Vektorsymbole verwendet |
| checkIcon | Element | NEIN | Passen Sie das Häkchensymbol an. Es werden nur React-Native-Vektorsymbole verwendet |
| unCheckIcon | Element | NEIN | Deaktivieren Sie das Deaktivierungssymbol. Es werden nur React-Native-Vektorsymbole verwendet |
| renderItem | (item, isSelect, isOpen, onOpen, onClose, onSelect)=> Element | NEIN | Entnimmt ein Element aus Daten und rendert es in der Liste |
| API | Beschreibung |
|---|---|
| klar | Daten aktualisieren |
| setSelectedItem | Der Eingabewert ist das von onSelect zurückgegebene Ergebnis |
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
}
} ) ;
