react native checkbox tree

react-native-checkbox-tree

แผนผังช่องทำเครื่องหมายที่เรียบง่ายและสง่างามสำหรับ React Native นำไปใช้งานโดยใช้ react-native-vector-icon

เริ่มต้นใช้งาน

    npm install react - native - checkbox - tree -- save

หรือ

    yarn add react - native - checkbox - tree

ตอนนี้เราจำเป็นต้องติดตั้งไอคอน react-native-vector-icon

    npm install react - native - vector - icons -- save

หรือ

    yarn add react - native - vector - icons 

การสาธิตซอร์สโค้ด

react-native-template-components เทมเพลตที่สวยงามสำหรับ React Native

การสาธิต

อุปกรณ์ประกอบฉาก

อุปกรณ์ประกอบฉาก	พารามิเตอร์	คือต้องการ	คำอธิบาย
ข้อมูล	อาร์เรย์	ใช่	ข้อมูลเป็นอาร์เรย์ธรรมดา
ฟิลด์ข้อความ	สตริง	ใช่	แยกฉลากออกจากรายการข้อมูล
เด็กField	สตริง	ใช่	แยกชายด์ของฟิลด์ออกจากรายการข้อมูล
เมื่อเลือก	(รายการ[])=> เป็นโมฆะ	ใช่	การโทรกลับแบบเลือก
สไตล์	วิวสไตล์	เลขที่	จัดแต่งทรงผมสำหรับมุมมองคอนเทนเนอร์
ข้อความสไตล์	ข้อความสไตล์	เลขที่	การจัดสไตล์สำหรับข้อความ
ไอคอนขนาด	ตัวเลข	เลขที่	ปรับแต่งขนาดไอคอน
ไอคอนสี	สตริง	เลขที่	ปรับแต่งสีไอคอน
autoSelectChilds	บูลีน	เลขที่	เลือกลูกโดยอัตโนมัติเมื่อเลือกรายการ ค่าเริ่มต้นจะเป็นจริง
autoSelectParents	บูลีน	เลขที่	เลือกพาเรนต์โดยอัตโนมัติเมื่อเลือกรายการย่อยทั้งหมด ค่าเริ่มต้นจะเป็นจริง
เปิดไอคอน	องค์ประกอบ	เลขที่	ปรับแต่งไอคอนเปิด ใช้ไอคอน react-native-vector-icon เท่านั้น
ปิดไอคอน	องค์ประกอบ	เลขที่	ปรับแต่งไอคอนปิด ใช้ไอคอน react-native-vector-icon เท่านั้น
ตรวจสอบไอคอน	องค์ประกอบ	เลขที่	ปรับแต่งไอคอนตรวจสอบ ใช้ไอคอน react-native-vector-icon เท่านั้น
ยกเลิกการเลือกไอคอน	องค์ประกอบ	เลขที่	ปรับแต่งไอคอนยกเลิกการเลือก ใช้ไอคอน react-native-vector-icon เท่านั้น
renderItem	(รายการ, isSelect, isOpen, onOpen, onClose, onSelect)=> องค์ประกอบ	เลขที่	รับรายการจากข้อมูลและแสดงผลลงในรายการ

วิธี

เอพีไอ	คำอธิบาย
ชัดเจน	รีเฟรชข้อมูล
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
    }
  } ) ;