diff --git a/FullList.js b/FullList.js
new file mode 100644
index 0000000..3f6f636
--- /dev/null
+++ b/FullList.js
@@ -0,0 +1,114 @@
+import React, {Component} from 'react';
+import {
+    Image,
+    View,
+    StyleSheet,
+    TouchableOpacity,
+    ScrollView,
+    Text,
+    FlatList
+} from 'react-native';
+import {Directory} from '../../public/plugin/api';
+
+const back_image = require("./back.png");
+
+export class FullList extends Component {
+    
+    render(){
+       
+        const data = this._getData();
+        const content = data.map((item, index) => (           
+            this.getItem(item, index)
+        )).slice(4);
+      
+        return (
+            
+                <ScrollView contentContainerStyle={styles.list}>
+                    
+                    <TouchableOpacity
+                        onPress={
+                            this.props.Change
+                        }><Image source={back_image} style={{ width: 25, height: 25, margin: 'auto'}} />
+                        
+                        </TouchableOpacity><Text style={{margin: 'auto',"font-size" : "20px",}}>全部</Text>
+                        {content}
+                </ScrollView>
+            
+        )
+        
+    }
+    _getData() {
+        return this.props.pprops.currentNode.getChildNodes();
+    }
+    getItem(item, index) {
+        //debugger;
+        
+        return (
+            <View style={styles.gridWrapper} key={index}>
+                    <Text style = {styles.title} >{item.title}</Text>
+                    <Sub item = {item} navigateNode ={this.props.pprops.navigateNode} />
+
+            </View>
+        )
+    }
+}
+
+class Sub extends Component{
+    render(){
+        //debugger;
+        const data = this.props.item.getChildNodes();
+        const content = data.map((item, index) => (           
+            this.getItem(item, index)
+        ));
+        return (
+            <ScrollView contentContainerStyle={styles.list}>{content}</ScrollView>
+            
+        )
+    }
+    getItem(item, index) {
+        //debugger;
+        return (
+            <View style={styles.box} key={index}>
+                <TouchableOpacity 
+                    onPress={() => this.props.navigateNode(item)}>
+                    {Directory.createIconGrid(item, {iconStyle: styles.gridIcon})}
+                </TouchableOpacity>
+            </View>
+        )
+    }
+
+}
+
+const styles = StyleSheet.create({
+    box:{
+        width : "20%",
+        flexWrap : "nowrap",
+    },
+    title:{
+        height : 56,
+        fontSize : "20px",
+        marginTop: 10
+    },
+    gridWrapper: {
+        width: "100%",
+        
+        //height: "17.5%",
+        marginTop: 10
+    },
+    gridIcon: {
+        width: 36,
+        height: 36,
+        borderRadius: 8,
+        
+    },
+    list: {
+        flex: 1,
+        flexDirection: "row",
+        overflow: "hidden auto",
+        //alignContent:"flex-start",
+        flexWrap: "wrap",
+        width: "100%",
+        transform: "translateZ(0px)"
+       
+    }
+});
\ No newline at end of file
diff --git a/MainList.js b/MainList.js
new file mode 100644
index 0000000..7814182
--- /dev/null
+++ b/MainList.js
@@ -0,0 +1,119 @@
+import React, {Component} from 'react';
+import {
+    Image,
+    View,
+    StyleSheet,
+    TouchableOpacity,
+    ScrollView
+} from 'react-native';
+import {Directory} from '../../public/plugin/api';
+import {FullList} from './FullList';
+import { from } from 'core-js/fn/array';
+
+const DirectoryScrollView = Directory.DirectoryScrollView;
+var image = require('./fold.png');
+
+class MainList extends Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            hidden : true
+        }
+    }
+    Change = () => {
+        
+        this.setState({
+            hidden : this.state.hidden ? false : true
+        })
+    }
+    render() {
+
+        const data = this._getData();
+        const content = data.map((item, index) => (           
+            this.getItem(item, index)
+        ));
+        
+        if(content.length < 5){
+            return <DirectoryScrollView>
+                        <ScrollView contentContainerStyle={styles.list}>
+                            {content}
+                        </ScrollView>
+                    </DirectoryScrollView>
+        }
+        
+        
+        if (!this.state.hidden){
+            
+            return(
+                
+                <FullList pprops = {this.props} Change = {this.Change}/>
+            )
+        }
+        
+        fullIcon = (<View style={styles.gridWrapper} >
+            <TouchableOpacity
+                onPress={
+                    this.Change
+                }><Image source={image} style={{ width: 36, height: 36, margin: 'auto'}} />
+                <p style={{color: "#666", fontSize: 12, textAlign: "center"}}>全部</p>
+            </TouchableOpacity>
+        </View>);
+        return (
+        <DirectoryScrollView >
+            <ScrollView contentContainerStyle={styles.list}>
+                 {content}
+            </ScrollView>
+        </DirectoryScrollView>
+        )}
+
+    getItem(item, index) {
+        return (
+            <View style={styles.gridWrapper} key={index}>
+                <TouchableOpacity
+                    onPress={() => this.props.navigateNode(item)}>
+                    {Directory.createIconGrid(item, {iconStyle: styles.gridIcon})}
+                </TouchableOpacity>
+            </View>
+        )
+    }
+
+    _getData() {
+        return this.props.currentNode.getChildNodes();
+    }
+}
+
+class Static extends Component{
+    render() {
+     
+        const content = this.props.content;
+        var foldList = content.slice(0, 4);
+        return foldList;
+    }
+    
+}
+
+export default MainList;
+
+const styles = StyleSheet.create({
+    gridWrapper: {
+        width: "20%",
+        //height: "17.5%",
+        marginTop: 10
+    },
+    gridIcon: {
+        width: 36,
+        height: 36,
+        borderRadius: 8,
+        
+    },
+    list: {
+        flex: 1,
+        flexDirection: "row",
+        overflow: "hidden auto",
+        //alignContent:"flex-start",
+        flexWrap: "wrap",
+        width: "100%",
+        transform: "translateZ(0px)"
+       
+    }
+});
\ No newline at end of file
diff --git a/back.png b/back.png
new file mode 100644
index 0000000..d85c2a5
Binary files /dev/null and b/back.png differ
diff --git a/fold.png b/fold.png
new file mode 100644
index 0000000..6be8b77
Binary files /dev/null and b/fold.png differ
diff --git a/index.js b/index.js
new file mode 100644
index 0000000..cd4f642
--- /dev/null
+++ b/index.js
@@ -0,0 +1,26 @@
+import {Widget, Toolbar, Directory} from '../public/plugin/api';
+
+import SubList from "./Zip/SubList";
+import MainList from "./Zip/MainList";
+
+let apiVersions = {
+    Widget: '2.0.1',
+    Toolbar: '2.0.0',
+    Directory: '2.2.0'
+};
+
+function run() {
+
+    Directory.registerFunction((directoryNode) => {
+        console.log(directoryNode.getLayer() );
+        if (directoryNode.getLayer() === 0 ) {
+            return MainList;
+        } else {
+            return SubList;
+        }
+    });
+    Directory.registerFetchLayersCountFunction(() => {
+        return 2;
+    })
+    
+}
\ No newline at end of file