|
@@ -1,164 +0,0 @@
|
1
|
|
-const React = require('react');
|
2
|
|
-const { Component } = require('react');
|
3
|
|
-
|
4
|
|
-const { View, Text, Button, Platform } = require('react-native');
|
5
|
|
-
|
6
|
|
-const { Navigation } = require('react-native-navigation');
|
7
|
|
-const testIDs = require('../testIDs');
|
8
|
|
-const Bounds = require('../components/Bounds');
|
9
|
|
-class TextScreen extends Component {
|
10
|
|
- static options() {
|
11
|
|
- return {
|
12
|
|
- bottomTabs: {
|
13
|
|
- drawBehind: true,
|
14
|
|
- testID: testIDs.BOTTOM_TABS_ELEMENT
|
15
|
|
- },
|
16
|
|
- topBar: {
|
17
|
|
- testID: testIDs.TOP_BAR_ELEMENT
|
18
|
|
- }
|
19
|
|
- };
|
20
|
|
- }
|
21
|
|
-
|
22
|
|
- render() {
|
23
|
|
- return (
|
24
|
|
- <Bounds>
|
25
|
|
- <View style={styles.root}>
|
26
|
|
- <Text style={styles.h1} testID={testIDs.CENTERED_TEXT_HEADER}>{this.props.text || 'Text Screen'}</Text>
|
27
|
|
- {this.renderTextFromFunctionInProps()}
|
28
|
|
- <Text style={styles.footer}>{`this.props.componentId = ${this.props.componentId}`}</Text>
|
29
|
|
- <Button title={'Set Tab Badge'} testID={testIDs.SET_TAB_BADGE_BUTTON} onPress={() => this.onClickSetBadge()} />
|
30
|
|
- <Button title={'Set empty Tab Badge'} testID={testIDs.SET_TAB_BADGE_BUTTON_NULL} onPress={() => this.onClickSetNullBadge()} />
|
31
|
|
- <Button title={'Switch To Tab 2'} testID={testIDs.SWITCH_SECOND_TAB_BUTTON} onPress={() => this.onClickSwitchToTab()} />
|
32
|
|
- <Button title={'Switch To Tab 1 by componentID'} testID={testIDs.SWITCH_FIRST_TAB_BUTTON} onPress={() => this.onClickSwitchToTabByComponentID()} />
|
33
|
|
- {/* tslint:disable-next-line:max-line-length */}
|
34
|
|
- { Platform.OS === 'android' && <Button title='Hide Tab Bar' testID={testIDs.HIDE_BOTTOM_TABS_BUTTON} onPress={() => this.toggleTabBarVisibility(this.props.componentId, false)} /> }
|
35
|
|
- { Platform.OS === 'android' && <Button title='Show Tab Bar' testID={testIDs.SHOW_BOTTOM_TABS_BUTTON} onPress={() => this.toggleTabBarVisibility('BottomTabs', true)} /> }
|
36
|
|
- <Button title='Hide Tab Bar on Push' testID={testIDs.HIDE_BOTTOM_TABS_ON_PUSH_BUTTON} onPress={() => this.hideTabBarOnPush()} />
|
37
|
|
- <Button title='Show Left Side Menu' testID={testIDs.SHOW_LEFT_SIDE_MENU_BUTTON} onPress={() => this.showSideMenu('left')} />
|
38
|
|
- <Button title='Show Right Side Menu' testID={testIDs.SHOW_RIGHT_SIDE_MENU_BUTTON} onPress={() => this.showSideMenu('right')} />
|
39
|
|
- <Button title='Push' testID={testIDs.PUSH_BUTTON} onPress={this.onClickPush} />
|
40
|
|
- <Button title='Pop' testID={testIDs.POP_BUTTON} onPress={this.onClickPop} />
|
41
|
|
- <Button title='Dismiss modal' testID={testIDs.DISMISS_MODAL_BUTTON} onPress={this.onClickDismissModal} />
|
42
|
|
- </View>
|
43
|
|
- </Bounds>
|
44
|
|
- );
|
45
|
|
- }
|
46
|
|
-
|
47
|
|
- onClickSetBadge() {
|
48
|
|
- Navigation.mergeOptions(this.props.componentId, {
|
49
|
|
- bottomTab: {
|
50
|
|
- badge: `TeSt`
|
51
|
|
- }
|
52
|
|
- });
|
53
|
|
- }
|
54
|
|
-
|
55
|
|
- onClickSetNullBadge() {
|
56
|
|
- Navigation.mergeOptions(this.props.componentId, {
|
57
|
|
- bottomTab: {
|
58
|
|
- badge: null
|
59
|
|
- }
|
60
|
|
- });
|
61
|
|
- }
|
62
|
|
-
|
63
|
|
- onClickPush = async () => {
|
64
|
|
- await Navigation.push(this.props.componentId, {
|
65
|
|
- component: {
|
66
|
|
- name: 'navigation.playground.PushedScreen'
|
67
|
|
- }
|
68
|
|
- });
|
69
|
|
- }
|
70
|
|
-
|
71
|
|
- onClickDismissModal = () => {
|
72
|
|
- Navigation.dismissModal(this.props.componentId);
|
73
|
|
- }
|
74
|
|
-
|
75
|
|
- onClickPop = async () => {
|
76
|
|
- await Navigation.pop(this.props.componentId);
|
77
|
|
- }
|
78
|
|
-
|
79
|
|
- renderTextFromFunctionInProps() {
|
80
|
|
- if (!this.props.myFunction) {
|
81
|
|
- return undefined;
|
82
|
|
- }
|
83
|
|
- return (
|
84
|
|
- <Text style={styles.h1}>{this.props.myFunction()}</Text>
|
85
|
|
- );
|
86
|
|
- }
|
87
|
|
-
|
88
|
|
- onClickSwitchToTab() {
|
89
|
|
- Navigation.mergeOptions(this.props.componentId, {
|
90
|
|
- bottomTabs: {
|
91
|
|
- currentTabIndex: 1,
|
92
|
|
- visible: false,
|
93
|
|
- drawBehind: true,
|
94
|
|
- animate: true
|
95
|
|
- }
|
96
|
|
- });
|
97
|
|
- }
|
98
|
|
-
|
99
|
|
- onClickSwitchToTabByComponentID() {
|
100
|
|
- Navigation.mergeOptions(this.props.componentId, {
|
101
|
|
- bottomTabs: {
|
102
|
|
- currentTabId: 'TAB1_ID'
|
103
|
|
- }
|
104
|
|
- });
|
105
|
|
- }
|
106
|
|
-
|
107
|
|
- toggleTabBarVisibility(componentId, visible) {
|
108
|
|
- Navigation.mergeOptions(componentId, {
|
109
|
|
- bottomTabs: {
|
110
|
|
- visible,
|
111
|
|
- drawBehind: true,
|
112
|
|
- animate: true
|
113
|
|
- }
|
114
|
|
- });
|
115
|
|
- }
|
116
|
|
-
|
117
|
|
- hideTabBarOnPush() {
|
118
|
|
- Navigation.push(this.props.componentId, {
|
119
|
|
- component: {
|
120
|
|
- name: 'navigation.playground.PushedScreen'
|
121
|
|
- }
|
122
|
|
- });
|
123
|
|
- }
|
124
|
|
-
|
125
|
|
- showSideMenu(side) {
|
126
|
|
- Navigation.mergeOptions(this.props.componentId, {
|
127
|
|
- sideMenu: {
|
128
|
|
- [side]: {
|
129
|
|
- visible: true
|
130
|
|
- }
|
131
|
|
- }
|
132
|
|
- });
|
133
|
|
- }
|
134
|
|
-
|
135
|
|
- onClickPop() {
|
136
|
|
- Navigation.pop(this.props.componentId);
|
137
|
|
- }
|
138
|
|
-}
|
139
|
|
-
|
140
|
|
-module.exports = TextScreen;
|
141
|
|
-
|
142
|
|
-const styles = {
|
143
|
|
- root: {
|
144
|
|
- flexGrow: 1,
|
145
|
|
- justifyContent: 'center',
|
146
|
|
- alignItems: 'center',
|
147
|
|
- backgroundColor: '#E3DCC3'
|
148
|
|
- },
|
149
|
|
- h1: {
|
150
|
|
- fontSize: 24,
|
151
|
|
- textAlign: 'center',
|
152
|
|
- margin: 10
|
153
|
|
- },
|
154
|
|
- h2: {
|
155
|
|
- fontSize: 12,
|
156
|
|
- textAlign: 'center',
|
157
|
|
- margin: 10
|
158
|
|
- },
|
159
|
|
- footer: {
|
160
|
|
- fontSize: 10,
|
161
|
|
- color: '#888',
|
162
|
|
- marginTop: 10
|
163
|
|
- }
|
164
|
|
-};
|