EmojiView.js
1.93 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
import React, {Component} from 'react';
import Global from '../utils/Global';
import Smiley from '../utils/Smiley';
import {Dimensions, Image, StyleSheet, View, ViewPagerAndroid,} from 'react-native';
const {width} = Dimensions.get('window');
export default class EmojiView extends Component {
render() {
return (
<ViewPagerAndroid
style={styles.viewPager}
initialPage={0}>
<View style={styles.pageStyle}><Page index={0}/></View>
<View style={styles.pageStyle}><Page index={1}/></View>
<View style={styles.pageStyle}><Page index={2}/></View>
</ViewPagerAndroid>
);
}
}
class Page extends Component {
render() {
var page = [];
for (var j = 0; j < 3; j++) {
var row = [];
for (var i = 0; i < 7; i++) {
if (i == 6 && j == 2) {
row.push(
<View key={i}
style={{flex: 1, justifyContent: 'center', alignItems: 'center', paddingTop: 10, paddingBottom: 10,}}>
<Image source={Smiley.data[105]} style={styles.emojiDelIcon}/>
</View>
);
} else {
row.push(
<View key={i}
style={{flex: 1, justifyContent: 'center', alignItems: 'center', paddingTop: 10, paddingBottom: 10,}}>
<Image source={Smiley.data[i * 7 + j + this.props.index * 20]} style={styles.emojiIcon}/>
</View>
);
}
}
page.push(
<View key={"row" + j} style={{flexDirection: 'row', height: Global.emojiViewHeight / 3}}>
{row}
</View>
);
}
return (
<View>{page}</View>
);
}
}
const styles = StyleSheet.create({
viewPager: {
width: width,
height: Global.emojiViewHeight,
backgroundColor: '#F4F4F4',
},
pageStyle: {
width: width,
paddingLeft: 5,
paddingRight: 5,
},
emojiIcon: {
width: 30,
height: 30,
},
emojiDelIcon: {
width: 30,
height: 24,
}
});