react native checkbox tree

реагирование-родное-дерево флажков

Простое и элегантное дерево флажков для 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 

Демонстрация исходного кода

response-native-template-comments Красивый шаблон для React Native.

Демо

Реквизит

Реквизит	Параметры	isRequire	Описание
данные	Множество	Да	Данные представляют собой простой массив
текстовое поле	Нить	Да	Извлечь метку из элемента данных
ребенокПоле	Нить	Да	Извлеките дочерние поля из элемента данных
onSelect	(item[])=> недействительно	Да	Обратный вызов выбора
стиль	Стиль представления	Нет	Стилизация для представления контейнера
текстовый стиль	ТекстСтиль	Нет	Стилизация текста
iconSize	Число	Нет	Настроить размер значка
значокЦвет	Нить	Нет	Настроить цвет значка
autoSelectChilds	логическое значение	Нет	Автоматически выбирать дочерние элементы при выборе элемента, по умолчанию — true.
autoSelectParents	логическое значение	Нет	Автоматически выбирать родителя, когда выбраны все дочерние элементы, по умолчанию — true.
openIcon	Элемент	Нет	Настройте значок открытия. Только использование реактивных векторных значков
закрытьЗначок	Элемент	Нет	Настройте значок закрытия. Только использование реактивных векторных значков
проверить значок	Элемент	Нет	Настройте значок проверки. Только использование реактивных векторных значков
снять флажок иконку	Элемент	Нет	Настройте значок снятия отметки. Только использование реактивных векторных значков
рендеритем	(item, isSelect, isOpen, onOpen, onClose, onSelect)=> Элемент	Нет	Берет элемент из данных и отображает его в списке

Метод

API	Описание
прозрачный	Обновить данные
setSelectedItem	Входное значение — это результат, возвращаемый onSelect.

Пример 1

 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 ,
  } ,
} ) ; 

Пример 2

  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
    }
  } ) ;