plateName.js
3.67 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
/**
* Created by Cassie on 2018/03/06
*/
import React, { Component } from 'react';
import {
StyleSheet,
View,
Text,
TouchableOpacity,
Image,
FlatList,
StatusBar
} from 'react-native';
import {zoomW,zoomH} from '../../utils/getSize';
import {xnBorderWidth} from "../../utils/utils";
const back = require('../../img/back.png');
const close = require('../../img/close.png');
const cross = require('../../img/cross.png');
const plate = require('../../img/plate.png');
const arrow = require('../../img/arrow.png');
export default class PlateName extends Component {
static navigationOptions = ({ navigation, screenProps })=>({
title: '选择板块',
headerLeft:(<View style={{display:'flex',flexDirection:'row'}}>
<TouchableOpacity style={styles.leftIcon} onPress={navigation.state.params?navigation.state.params.back:null}>
<Image source={back} style={styles.backIcon} resizeMode="contain" />
</TouchableOpacity>
<TouchableOpacity style={styles.leftIcon} onPress={navigation.state.params?navigation.state.params.close:null}>
<Image source={close} style={styles.closeIcon} resizeMode="contain" />
</TouchableOpacity>
</View>),
headerRight:(<View />)
});
constructor(props) {
super(props);
this.state = {
list:['怪兽汉化','宝井理人','木原音濑','寒武纪年','苏州bjd','雪龙神君','藤原熏']
};
};
componentDidMount(){
//设置头部
this.props.navigation.setParams({
back:()=>{
this.props.navigation.goBack();
},
close:()=>{
NativeModules.system.navTo("BACK");
}
});
};
/* 渲染列表*/
keyExtractor = (item,index) => index;
/*首页列表*/
renderItem = ({item,index}) => (
<View style={styles.plateItem}>
<TouchableOpacity style={styles.plateName}>
<Text style={{fontSize:16,color:'#333'}}>灌水区</Text>
</TouchableOpacity>
</View>
);
render() {
return (
<View style={styles.background}>
<StatusBar barStyle="light-content" />
<FlatList keyExtractor={this.keyExtractor} data={this.state.list} renderItem={this.renderItem} numColumns={2} />
</View>
);
}
}
const styles = StyleSheet.create({
leftIcon:{
width:(50/zoomW),
height:'100%',
display:'flex',
flexDirection:'row',
alignItems:'center'
},
backIcon:{
width:(10/zoomW),
height:(18/zoomH),
marginLeft:(10/zoomW)
},
closeIcon:{
width:(18/zoomW),
height:(18/zoomH)
},
background:{
flex:1,
backgroundColor:'#f2f2f2',
paddingLeft:(10/zoomW),
paddingRight:(10/zoomW),
flexDirection:'row',
flexWrap:'wrap',
paddingTop:(10/zoomW)
},
plateItem:{
width:'50%',
display:'flex',
justifyContent:'center',
alignItems:'center',
marginTop:(5/zoomH),
marginBottom:(5/zoomH)
},
plateName:{
width:(170/zoomW),
height:(40/zoomH),
borderWidth:1,
borderColor:'#ddd',
borderStyle:'solid',
display:'flex',
justifyContent:'center',
alignItems:'center',
borderRadius:(4/zoomW),
backgroundColor:'#fff'
},
rightItem:{
height:'100%',
borderLeftWidth:1,
borderLeftColor:'#eee',
borderStyle:'solid',
display:'flex',
justifyContent:'center',
paddingLeft:(10/zoomW)
}
});