Browse Source

Added footer webview navigation

keplyx 2 years ago
parent
commit
161434a730

+ 34
- 2
components/WebViewScreen.js View File

@@ -2,7 +2,7 @@
2 2
 
3 3
 import * as React from 'react';
4 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 6
 import WebView from "react-native-webview";
7 7
 import Touchable from "react-native-platform-touchable";
8 8
 import CustomMaterialIcon from "../components/CustomMaterialIcon";
@@ -16,6 +16,7 @@ type Props = {
16 16
     headerTitle: string,
17 17
     hasHeaderBackButton: boolean,
18 18
     hasSideMenu: boolean,
19
+    hasFooter: boolean,
19 20
 }
20 21
 
21 22
 /**
@@ -27,6 +28,7 @@ export default class WebViewScreen extends React.Component<Props> {
27 28
         customInjectedJS: '',
28 29
         hasBackButton: false,
29 30
         hasSideMenu: true,
31
+        hasFooter: true,
30 32
     };
31 33
 
32 34
     webview: WebView;
@@ -50,7 +52,6 @@ export default class WebViewScreen extends React.Component<Props> {
50 52
     getRefreshButton() {
51 53
         return (
52 54
             <View style={{flexDirection: 'row'}}>
53
-                {this.getHeaderButton(() => this.openWebLink(), 'web')}
54 55
                 {this.getHeaderButton(() => this.refreshWebview(), 'refresh')}
55 56
             </View>
56 57
         );
@@ -60,6 +61,14 @@ export default class WebViewScreen extends React.Component<Props> {
60 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 72
     render() {
64 73
         const nav = this.props.navigation;
65 74
         return (
@@ -95,6 +104,29 @@ export default class WebViewScreen extends React.Component<Props> {
95 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 130
             </BaseContainer>
99 131
         );
100 132
     }

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

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

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

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

+ 2
- 1
screens/PlanexScreen.js View File

@@ -39,7 +39,8 @@ export default class PlanexScreen extends React.Component<Props> {
39 39
                 url={PLANEX_URL}
40 40
                 customInjectedJS={this.customInjectedJS}
41 41
                 headerTitle={'Planex'}
42
-                hasHeaderBackButton={false}/>
42
+                hasHeaderBackButton={false}
43
+                hasFooter={false}/>
43 44
         );
44 45
     }
45 46
 }

Loading…
Cancel
Save