react native checkbox tree
1.0.0
一個簡單而優雅的 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 React-Native-Template-Components 一個漂亮的 React Native 模板。
| 道具 | 參數 | 是否需要 | 描述 |
|---|---|---|---|
| 數據 | 大批 | 是的 | 數據是一個普通數組 |
| 文字欄位 | 細繩 | 是的 | 從資料項中提取標籤 |
| 子字段 | 細繩 | 是的 | 從資料項中提取子字段 |
| 選擇時 | (項目[])=>無效 | 是的 | 選擇回調 |
| 風格 | 視圖樣式 | 不 | 容器視圖的樣式 |
| 文字樣式 | 文字樣式 | 不 | 文字樣式 |
| 圖示大小 | 數位 | 不 | 自訂圖示大小 |
| 圖示顏色 | 細繩 | 不 | 自訂圖示顏色 |
| 自動選擇子項 | 布林值 | 不 | 選擇項目時自動選擇子項，預設為 true |
| 自動選擇父母 | 布林值 | 不 | 選擇所有子項時自動選擇父項，預設為 true |
| 打開圖示 | 元素 | 不 | 自訂開啟圖示。僅使用react-native-vector-icons |
| 關閉圖示 | 元素 | 不 | 自訂關閉圖示。僅使用react-native-vector-icons |
| 檢查圖示 | 元素 | 不 | 自訂檢查圖示。僅使用react-native-vector-icons |
| 取消選取圖標 | 元素 | 不 | 自訂取消選取圖示。僅使用react-native-vector-icons |
| 渲染項 | (item, isSelect, isOpen, onOpen, onClose, onSelect)=> 元素 | 不 | 從數據中獲取一個項目並將其呈現到清單中 |
| 應用程式介面 | 描述 |
|---|---|
| 清除 | 重新整理數據 |
| 設定選定項 | 輸入值是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
}
} ) ;
