33 * Created by Rabbit on 2018/4/12.
44 */
55
6- import React , { Component } from 'react' ;
6+ import React , { Component , useContext , useRef , useState } from 'react' ;
77import {
88 StyleSheet ,
99 Text ,
@@ -15,19 +15,138 @@ import {
1515 BackHandler ,
1616 DeviceEventEmitter
1717} from 'react-native' ;
18-
1918import { Button , GradientButton , PopoverPickerViewItem } from '../../components' ;
2019import Icon from 'react-native-vector-icons/Ionicons' ;
21- import { Label , ListRow , PopoverPicker , Badge } from 'teaset' ;
20+ import { Label , ListRow , PopoverPicker , Badge , Overlay } from 'teaset' ;
2221import BaseContainer from '../../components/BaseContainer' ;
23- import { createBottomTabNavigator , BottomTabBar } from 'react-navigation-tabs' ;
22+ import BlackTheme from '../../resource/thems/BlackTheme' ;
23+ import { StoreContext } from '../../utils/Tool' ;
24+ import { observer } from 'mobx-react-lite' ;
2425
2526type Props = {
2627 navigation : any ,
2728 defaultValue : string
2829} ;
2930
30- export class Main extends Component < Props , any > {
31+ let badgeNumber : number = 10 ;
32+ const items = [ '扫一扫' , '加好友/群' , '首付款' , '高能舞室' ] ;
33+
34+ const Main = observer ( ( props : Props ) => {
35+ const store = useContext ( StoreContext ) ;
36+ const { themeStore } = store ;
37+
38+ const popViewRef : PopoverPicker = useRef ( ) ;
39+ const [ modalSelectedIndex , setModalSelectedIndex ] = useState ( 0 ) ;
40+
41+ function login ( type : string ) {
42+ if ( type === 'router' ) {
43+ props . navigation . navigate ( 'AuthRouter' , { type } ) ;
44+ } else {
45+ props . navigation . navigate ( 'Login' , { type } ) ;
46+ }
47+ }
48+
49+ function openModalPress ( popView : any ) {
50+ const blackStyle = {
51+ backgroundColor : '#fff' ,
52+ paddingLeft : 12 ,
53+ paddingRight : 12
54+ } ;
55+
56+ popView . measure ( ( x , y , width , height , pageX , pageY ) => {
57+ PopoverPicker . show (
58+ { x : pageX + 1 , y : pageY , width, height } ,
59+ items ,
60+ modalSelectedIndex ,
61+ ( item , index ) => setModalSelectedIndex ( index ) ,
62+ {
63+ showArrow : true ,
64+ align : 'end' ,
65+ popoverStyle : blackStyle ,
66+ overlayOpacity : 0.3 ,
67+ directionInsets : - 3
68+ }
69+ ) ;
70+ } ) ;
71+ }
72+
73+ function renderRightView ( ) {
74+ return (
75+ < Button onPress = { ( ) => openModalPress ( popViewRef . current ) } >
76+ < View ref = { popViewRef } style = { { marginRight : px2dp ( 20 ) } } >
77+ < Icon name = { 'md-add' } size = { 30 } color = { themeStore . themes . addColor } />
78+ </ View >
79+ </ Button >
80+ ) ;
81+ }
82+
83+ function addBadgeNumber ( ) {
84+ DeviceEventEmitter . emit ( 'badgeNumber' , badgeNumber ++ ) ;
85+ }
86+
87+ return (
88+ < BaseContainer
89+ style = { styles . container }
90+ isTopNavigator = { true }
91+ title = { '我的' }
92+ rightView = { renderRightView ( ) }
93+ onWillBlur = { payload => {
94+ console . log ( 'Main页面将要失去焦点' , payload ) ;
95+ } }
96+ onDidBlur = { payload => {
97+ console . log ( 'Main页面已经失去焦点' , payload ) ;
98+ } }
99+ onWillFocus = { payload => {
100+ console . log ( 'Main页面将要获得焦点' , payload ) ;
101+ } }
102+ onDidFocus = { payload => {
103+ console . log ( 'Main页面已经获得焦点' , payload ) ;
104+ } }
105+ >
106+ < View style = { { alignItems : 'center' } } >
107+ < GradientButton
108+ title = { '切换路由的登录方式' }
109+ onPress = { ( ) => login ( 'router' ) }
110+ gradientStyle = { styles . gradientStyle }
111+ titleStyle = { styles . btnTitleStyle }
112+ btnStyle = { styles . btnStyle }
113+ />
114+ < GradientButton
115+ title = { '直接跳转的登录方式' }
116+ onPress = { ( ) => login ( 'navigate' ) }
117+ gradientStyle = { styles . gradientStyle }
118+ titleStyle = { styles . btnTitleStyle }
119+ btnStyle = { styles . btnStyle }
120+ />
121+ < GradientButton
122+ title = { '添加通知数量' }
123+ onPress = { ( ) => addBadgeNumber ( ) }
124+ gradientStyle = { styles . gradientStyle }
125+ titleStyle = { styles . btnTitleStyle }
126+ btnStyle = { styles . btnStyle }
127+ />
128+ < GradientButton
129+ title = { '我的资料' }
130+ onPress = { ( ) => props . navigation . navigate ( 'MainData' ) }
131+ gradientStyle = { styles . gradientStyle }
132+ titleStyle = { styles . btnTitleStyle }
133+ btnStyle = { styles . btnStyle }
134+ />
135+ < GradientButton
136+ title = { '更换主题' }
137+ onPress = { ( ) => {
138+ props . navigation . navigate ( 'ThemeScreen' ) ;
139+ } }
140+ gradientStyle = { styles . gradientStyle }
141+ titleStyle = { styles . btnTitleStyle }
142+ btnStyle = { styles . btnStyle }
143+ />
144+ </ View >
145+ </ BaseContainer >
146+ ) ;
147+ } ) ;
148+
149+ class Main1 extends Component < Props , any > {
31150 items : Array < any > ;
32151 popView : any ;
33152 badgeNumber : number = 10 ;
@@ -140,6 +259,15 @@ export class Main extends Component<Props, any> {
140259 titleStyle = { styles . btnTitleStyle }
141260 btnStyle = { styles . btnStyle }
142261 />
262+ < GradientButton
263+ title = { '更换主题' }
264+ onPress = { ( ) => {
265+ this . props . navigation . navigate ( 'ThemeScreen' ) ;
266+ } }
267+ gradientStyle = { styles . gradientStyle }
268+ titleStyle = { styles . btnTitleStyle }
269+ btnStyle = { styles . btnStyle }
270+ />
143271 </ View >
144272 </ BaseContainer >
145273 ) ;
@@ -164,3 +292,5 @@ const styles = StyleSheet.create({
164292 color : 'white'
165293 }
166294} ) ;
295+
296+ export { Main } ;
0 commit comments