forked from osdio/noder-react-native
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathMessage.js
More file actions
124 lines (104 loc) · 2.46 KB
/
Message.js
File metadata and controls
124 lines (104 loc) · 2.46 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
import React, {
View,
Component,
StyleSheet,
Dimensions,
Platform,
StatusBar
} from 'react-native';
import ScrollableTabView from 'react-native-scrollable-tab-view';
import TabBar from '../components/TabBar';
import Return from '../components/base/Return';
import MessageList from '../components/MessageList';
const {height, width} = Dimensions.get('window');
const STATUS_BAR_HEIGHT = 20;
class Message extends Component {
constructor(props) {
super(props);
this.state = {
didFocus: false
};
}
componentDidMount() {
this.props.actions.getMessageList();
}
componentWillUnmount(){
this.props.actions.markAsRead();
}
componentDidFocus(haveFocused) {
if (!haveFocused) {
setTimeout(()=>{
this.setState({
didFocus: true
});
});
}
}
_renderTabBar() {
const statusBarHeight = Platform.OS === 'ios' ? STATUS_BAR_HEIGHT : 0;
const props = {
style: {
backgroundColor: '#292829',
height: 50 + 4 + statusBarHeight,
paddingTop: statusBarHeight
},
activeTabTextColor: 'white',
normalTabTextColor: 'rgba(255,255,255,0.7)',
tabUnderlineStyle: {
backgroundColor: 'rgba(241,196,15,1)'
}
};
return (
<TabBar {...props}/>
)
}
render() {
const {fetchMessagesPending, hasNotRead, hasRead, isMarkAsReadLoading, actions, router} = this.props;
return (
<View style={styles.container}>
<ScrollableTabView
style={styles.scrollableTabView}
edgeHitWidth={(width/3)*2}
renderTabBar={this._renderTabBar.bind(this)}>
<MessageList
router={router}
didFocus={ this.state.didFocus }
pending={ fetchMessagesPending }
data={ this.state.didFocus ? hasNotRead : [] }
style={styles.userTopicPage}
tabLabel={ "未读消息 " + hasNotRead.length }
getMessageList={actions.getMessageList}
/>
<MessageList
router={router}
didFocus={ this.state.didFocus }
pending={ fetchMessagesPending }
data={ this.state.didFocus ? hasRead : [] }
style={styles.userTopicPage}
tabLabel={"已读消息 " + hasRead.length}
getMessageList={actions.getMessageList}
/>
</ScrollableTabView>
<Return router={router}/>
</View>
)
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: 'white',
height,
width
},
scrollableTabView: {
flex: 1
}
});
export const LayoutComponent = Message;
export function mapStateToProps(state) {
return {
...state.message,
...state.messageUI
}
}