Browse Source

Added footer webview navigation

keplyx 4 years ago
parent
commit
161434a730

+ 34
- 2
components/WebViewScreen.js View File

2
 
2
 
3
 import * as React from 'react';
3
 import * as React from 'react';
4
 import {Linking, Platform, View} from 'react-native';
4
 import {Linking, Platform, View} from 'react-native';
5
-import {Spinner} from 'native-base';
5
+import {Spinner, Footer, Right, Left, Body} from 'native-base';
6
 import WebView from "react-native-webview";
6
 import WebView from "react-native-webview";
7
 import Touchable from "react-native-platform-touchable";
7
 import Touchable from "react-native-platform-touchable";
8
 import CustomMaterialIcon from "../components/CustomMaterialIcon";
8
 import CustomMaterialIcon from "../components/CustomMaterialIcon";
16
     headerTitle: string,
16
     headerTitle: string,
17
     hasHeaderBackButton: boolean,
17
     hasHeaderBackButton: boolean,
18
     hasSideMenu: boolean,
18
     hasSideMenu: boolean,
19
+    hasFooter: boolean,
19
 }
20
 }
20
 
21
 
21
 /**
22
 /**
27
         customInjectedJS: '',
28
         customInjectedJS: '',
28
         hasBackButton: false,
29
         hasBackButton: false,
29
         hasSideMenu: true,
30
         hasSideMenu: true,
31
+        hasFooter: true,
30
     };
32
     };
31
 
33
 
32
     webview: WebView;
34
     webview: WebView;
50
     getRefreshButton() {
52
     getRefreshButton() {
51
         return (
53
         return (
52
             <View style={{flexDirection: 'row'}}>
54
             <View style={{flexDirection: 'row'}}>
53
-                {this.getHeaderButton(() => this.openWebLink(), 'web')}
54
                 {this.getHeaderButton(() => this.refreshWebview(), 'refresh')}
55
                 {this.getHeaderButton(() => this.refreshWebview(), 'refresh')}
55
             </View>
56
             </View>
56
         );
57
         );
60
         this.webview.reload();
61
         this.webview.reload();
61
     }
62
     }
62
 
63
 
64
+    goBackWebview() {
65
+        this.webview.goBack();
66
+    }
67
+
68
+    goForwardWebview() {
69
+        this.webview.goForward();
70
+    }
71
+
63
     render() {
72
     render() {
64
         const nav = this.props.navigation;
73
         const nav = this.props.navigation;
65
         return (
74
         return (
95
                         </View>
104
                         </View>
96
                     }
105
                     }
97
                 />
106
                 />
107
+                {this.props.hasFooter ?
108
+                    <Footer>
109
+                        <Left style={{
110
+                            paddingLeft: 6,
111
+                        }}>
112
+                            {this.getHeaderButton(() => this.openWebLink(), 'open-in-new')}
113
+                        </Left>
114
+                        <Body/>
115
+                        <Right style={{
116
+                            flexDirection: 'row',
117
+                            alignItems: 'flex-end',
118
+                            paddingRight: 6
119
+                        }}>
120
+                            <View style={{
121
+                                flexDirection: 'row',
122
+                                marginRight: 0,
123
+                                marginLeft: 'auto'
124
+                            }}>
125
+                                {this.getHeaderButton(() => this.goBackWebview(), 'chevron-left')}
126
+                                {this.getHeaderButton(() => this.goForwardWebview(), 'chevron-right')}
127
+                            </View>
128
+                        </Right>
129
+                    </Footer> : <View/>}
98
             </BaseContainer>
130
             </BaseContainer>
99
         );
131
         );
100
     }
132
     }

+ 2
- 2
native-base-theme/variables/platform.js View File

106
     checkboxTickColor: "#fff",
106
     checkboxTickColor: "#fff",
107
 
107
 
108
     // Color
108
     // Color
109
-    brandPrimary: platform === "ios" ? "#be1522" : "#be1522",
109
+    brandPrimary: "#be1522",
110
     brandInfo: "#62B1F6",
110
     brandInfo: "#62B1F6",
111
     brandSuccess: "#5cb85c",
111
     brandSuccess: "#5cb85c",
112
     brandDanger: "#d9534f",
112
     brandDanger: "#d9534f",
137
 
137
 
138
     // Footer
138
     // Footer
139
     footerHeight: 55,
139
     footerHeight: 55,
140
-    footerDefaultBg: platform === "ios" ? "#F8F8F8" : "#3F51B5",
140
+    footerDefaultBg: platform === "ios" ? "#F8F8F8" : "#be1522",
141
     footerPaddingBottom: 0,
141
     footerPaddingBottom: 0,
142
 
142
 
143
     // FooterTab
143
     // FooterTab

+ 2
- 2
native-base-theme/variables/platformDark.js View File

106
     checkboxTickColor: "#fff",
106
     checkboxTickColor: "#fff",
107
 
107
 
108
     // Color
108
     // Color
109
-    brandPrimary: platform === "ios" ? "#be1522" : "#be1522",
109
+    brandPrimary: "#be1522",
110
     brandInfo: "#62B1F6",
110
     brandInfo: "#62B1F6",
111
     brandSuccess: "#5cb85c",
111
     brandSuccess: "#5cb85c",
112
     brandDanger: "#d9534f",
112
     brandDanger: "#d9534f",
138
 
138
 
139
     // Footer
139
     // Footer
140
     footerHeight: 55,
140
     footerHeight: 55,
141
-    footerDefaultBg: platform === "ios" ? "#F8F8F8" : "#3F51B5",
141
+    footerDefaultBg: platform === "ios" ? "#F8F8F8" : "#be1522",
142
     footerPaddingBottom: 0,
142
     footerPaddingBottom: 0,
143
 
143
 
144
     // FooterTab
144
     // FooterTab

+ 2
- 1
screens/PlanexScreen.js View File

39
                 url={PLANEX_URL}
39
                 url={PLANEX_URL}
40
                 customInjectedJS={this.customInjectedJS}
40
                 customInjectedJS={this.customInjectedJS}
41
                 headerTitle={'Planex'}
41
                 headerTitle={'Planex'}
42
-                hasHeaderBackButton={false}/>
42
+                hasHeaderBackButton={false}
43
+                hasFooter={false}/>
43
         );
44
         );
44
     }
45
     }
45
 }
46
 }

Loading…
Cancel
Save