You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
114 lines
2.9 KiB
114 lines
2.9 KiB
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)" |
|
|
|
} |
|
}); |