react native checkbox tree
1.0.0
React Native를 위한 간단하고 우아한 체크박스 트리입니다. 반응 네이티브 벡터 아이콘을 사용하여 구현됨
npm install react - native - checkbox - tree -- save또는
yarn add react - native - checkbox - tree이제 반응 네이티브 벡터 아이콘을 설치해야 합니다.
npm install react - native - vector - icons -- save또는
yarn add react - native - vector - icons 반응 네이티브 템플릿 구성요소 React Native를 위한 아름다운 템플릿입니다.
| 소품 | 매개변수 | is필수 | 설명 |
|---|---|---|---|
| 데이터 | 정렬 | 예 | 데이터는 일반 배열입니다. |
| 텍스트 필드 | 끈 | 예 | 데이터 항목에서 라벨을 추출합니다. |
| child필드 | 끈 | 예 | 데이터 항목에서 필드 하위 항목을 추출합니다. |
| 선택 시 | (항목[])=> 무효 | 예 | 선택 콜백 |
| 스타일 | 뷰스타일 | 아니요 | 컨테이너 보기 스타일 지정 |
| 텍스트 스타일 | 텍스트 스타일 | 아니요 | 텍스트 스타일 지정 |
| 아이콘크기 | 숫자 | 아니요 | 아이콘 크기 맞춤설정 |
| 아이콘색상 | 끈 | 아니요 | 아이콘 색상 맞춤설정 |
| autoSelectChilds | 부울 | 아니요 | 항목을 선택할 때 자동으로 하위 항목을 선택합니다. 기본값은 true입니다. |
| autoSelectParents | 부울 | 아니요 | 모든 하위 항목이 선택되면 자동으로 상위 항목을 선택합니다. 기본값은 true입니다. |
| 오픈아이콘 | 요소 | 아니요 | 열린 아이콘을 사용자 정의합니다. 반응 네이티브 벡터 아이콘만 사용 |
| 닫기아이콘 | 요소 | 아니요 | 닫기 아이콘을 사용자 정의합니다. 반응 네이티브 벡터 아이콘만 사용 |
| 체크아이콘 | 요소 | 아니요 | 체크 아이콘을 사용자 정의합니다. 반응 네이티브 벡터 아이콘만 사용 |
| 체크 해제아이콘 | 요소 | 아니요 | 선택 취소 아이콘을 사용자 정의합니다. 반응 네이티브 벡터 아이콘만 사용 |
| 렌더아이템 | (항목, isSelect, isOpen, onOpen, onClose, onSelect)=> 요소 | 아니요 | 데이터에서 항목을 가져와 목록에 렌더링합니다. |
| API | 설명 |
|---|---|
| 분명한 | 데이터 새로 고침 |
| setSelectedItem | 입력값은 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
}
} ) ;
