上传文件至 'Zip'

Zip/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)"
+       
+    }
+});

Zip/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)"
+       
+    }
+});

Zip/SubList.js

@@ -0,0 +1,78 @@
+import React, {Component} from 'react';
+import {
+    StyleSheet,
+    TouchableOpacity,
+    View
+} from 'react-native';
+import {Directory} from '../../public/plugin/api';
+
+const DirectoryFlatList = Directory.DirectoryFlatList;
+
+class SubList extends Component {
+    constructor(props) {
+        super(props);
+        this._renderItem = this._renderItem.bind(this);
+    }
+
+    render() {
+        return <DirectoryFlatList
+            data={this.getData()}
+            keyExtractor={(item) => item.id}
+            renderItem={this._renderItem}
+            style={styles.list}
+        />
+    }
+
+    getData() {
+        return this.props.currentNode.getChildNodes();
+    }
+
+    _renderItem({item}) {
+        
+        return (
+            <View style={styles.itemWrapper}>
+                <TouchableOpacity
+                    style={styles.item}
+                    onPress={() => {
+                        this.props.navigateNode(item);
+                    }}
+                >
+                    {
+                        Directory.createIconCell(item,
+                            {
+                                
+                                containerStyle: {},
+                                textStyle: styles.text,
+                                iconStyle: styles.cellIcon,
+                                hideTopBorder: true,
+                                hideBottomBorder: true
+                            }
+                        )
+                    }
+                </TouchableOpacity>
+            </View>)
+    }
+}
+
+const styles = StyleSheet.create({
+    list: {
+        width: '100%'
+    },
+    item: {
+        paddingTop: '4%',
+        paddingBottom: '4%'
+    },
+    itemWrapper: {
+        borderBottomWidth: 1,
+        borderColor: '#F5F5F5'
+    },
+    text: {
+        color: '#666'
+    },
+    cellIcon: {
+        height: 34,
+        width: 34,
+        borderRadius: 17
+    }
+});
+export default SubList;