ysimard/application-amicale
1
0
Fork 0
forked from vergnet/application-amicale
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 * as React from 'react';
import {Linking, Platform, View} from 'react-native'; 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 WebView from "react-native-webview";
import Touchable from "react-native-platform-touchable"; import Touchable from "react-native-platform-touchable";
import CustomMaterialIcon from "../components/CustomMaterialIcon"; import CustomMaterialIcon from "../components/CustomMaterialIcon";
@ -16,6 +16,7 @@ type Props = {
headerTitle: string, headerTitle: string,
hasHeaderBackButton: boolean, hasHeaderBackButton: boolean,
hasSideMenu: boolean, hasSideMenu: boolean,
hasFooter: boolean,
} }
/** /**
@ -27,6 +28,7 @@ export default class WebViewScreen extends React.Component<Props> {
customInjectedJS: '', customInjectedJS: '',
hasBackButton: false, hasBackButton: false,
hasSideMenu: true, hasSideMenu: true,
hasFooter: true,
}; };
webview: WebView; webview: WebView;
@ -50,7 +52,6 @@ export default class WebViewScreen extends React.Component<Props> {
getRefreshButton() { getRefreshButton() {
return ( return (
<View style={{flexDirection: 'row'}}> <View style={{flexDirection: 'row'}}>
{this.getHeaderButton(() => this.openWebLink(), 'web')}
{this.getHeaderButton(() => this.refreshWebview(), 'refresh')} {this.getHeaderButton(() => this.refreshWebview(), 'refresh')}
</View> </View>
); );
@ -60,6 +61,14 @@ export default class WebViewScreen extends React.Component<Props> {
this.webview.reload(); this.webview.reload();
} }
goBackWebview() {
this.webview.goBack();
}
goForwardWebview() {
this.webview.goForward();
}
render() { render() {
const nav = this.props.navigation; const nav = this.props.navigation;
return ( return (
@ -95,6 +104,29 @@ export default class WebViewScreen extends React.Component<Props> {
</View> </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> </BaseContainer>
); );
} }

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

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

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

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

3
screens/PlanexScreen.js
View file

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