vergnet/application-amicale
5
5
Fork 5
Code Issues Pull requests Releases Wiki Activity

Added footer webview navigation

Browse source
This commit is contained in:
keplyx 2019-11-07 10:57:58 +01:00
parent db98144a0d
commit 161434a730
4 changed files with 40 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

36
components/WebViewScreen.js
View file

@ -2,7 +2,7 @@
import * as React from 'react';
import {Linking, Platform, View} from 'react-native';
import {Spinner} from 'native-base';
import {Spinner, Footer, Right, Left, Body} from 'native-base';
import WebView from "react-native-webview";
import Touchable from "react-native-platform-touchable";
import CustomMaterialIcon from "../components/CustomMaterialIcon";
@ -16,6 +16,7 @@ type Props = {
headerTitle: string,
hasHeaderBackButton: boolean,
hasSideMenu: boolean,
hasFooter: boolean,
}
/**
@ -27,6 +28,7 @@ export default class WebViewScreen extends React.Component<Props> {
customInjectedJS: '',
hasBackButton: false,
hasSideMenu: true,
hasFooter: true,
};
webview: WebView;
@ -50,7 +52,6 @@ export default class WebViewScreen extends React.Component<Props> {
getRefreshButton() {
return (
<View style={{flexDirection: 'row'}}>
{this.getHeaderButton(() => this.openWebLink(), 'web')}
{this.getHeaderButton(() => this.refreshWebview(), 'refresh')}
</View>
);
@ -60,6 +61,14 @@ export default class WebViewScreen extends React.Component<Props> {
this.webview.reload();
}
goBackWebview() {
this.webview.goBack();
}
goForwardWebview() {
this.webview.goForward();
}
render() {
const nav = this.props.navigation;
return (
@ -95,6 +104,29 @@ export default class WebViewScreen extends React.Component<Props> {
</View>
}
/>
{this.props.hasFooter ?
<Footer>
<Left style={{
paddingLeft: 6,
}}>
{this.getHeaderButton(() => this.openWebLink(), 'open-in-new')}
</Left>
<Body/>
<Right style={{
flexDirection: 'row',
alignItems: 'flex-end',
paddingRight: 6
}}>
<View style={{
flexDirection: 'row',
marginRight: 0,
marginLeft: 'auto'
}}>
{this.getHeaderButton(() => this.goBackWebview(), 'chevron-left')}
{this.getHeaderButton(() => this.goForwardWebview(), 'chevron-right')}
</View>
</Right>
</Footer> : <View/>}
</BaseContainer>
);
}

4
native-base-theme/variables/platform.js
View file

@ -106,7 +106,7 @@ export default {
checkboxTickColor: "#fff",
// Color
brandPrimary: platform === "ios" ? "#be1522" : "#be1522",
brandPrimary: "#be1522",
brandInfo: "#62B1F6",
brandSuccess: "#5cb85c",
brandDanger: "#d9534f",
@ -137,7 +137,7 @@ export default {
// Footer
footerHeight: 55,
footerDefaultBg: platform === "ios" ? "#F8F8F8" : "#3F51B5",
footerDefaultBg: platform === "ios" ? "#F8F8F8" : "#be1522",
footerPaddingBottom: 0,
// FooterTab

4
native-base-theme/variables/platformDark.js
View file

@ -106,7 +106,7 @@ export default {
checkboxTickColor: "#fff",
// Color
brandPrimary: platform === "ios" ? "#be1522" : "#be1522",
brandPrimary: "#be1522",
brandInfo: "#62B1F6",
brandSuccess: "#5cb85c",
brandDanger: "#d9534f",
@ -138,7 +138,7 @@ export default {
// Footer
footerHeight: 55,
footerDefaultBg: platform === "ios" ? "#F8F8F8" : "#3F51B5",
footerDefaultBg: platform === "ios" ? "#F8F8F8" : "#be1522",
footerPaddingBottom: 0,
// FooterTab

3
screens/PlanexScreen.js
View file

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