52 lines
1.6 KiB
TypeScript
52 lines
1.6 KiB
TypeScript
import React, { CSSProperties } from "react";
|
|
import { BackHandler, View, ViewProps } from "react-native";
|
|
import { WebView } from "react-native-webview";
|
|
import { BigButton } from "./components/atom/BigButton";
|
|
import { useFocusEffect, useNavigation } from "@react-navigation/native";
|
|
export default ({ route }) => {
|
|
if (!route.params) {
|
|
return null;
|
|
}
|
|
const { uri, useExitButton = true } = route.params;
|
|
const { goBack } = useNavigation();
|
|
const webViewRef = React.useRef<WebView>(null);
|
|
const [canGoBack, setCanGoBack] = React.useState(false);
|
|
|
|
useFocusEffect(
|
|
React.useCallback(() => {
|
|
const onHardwareBack = () => {
|
|
if (canGoBack) {
|
|
webViewRef.current?.goBack();
|
|
return true;
|
|
}
|
|
goBack();
|
|
return true;
|
|
};
|
|
|
|
BackHandler.addEventListener("hardwareBackPress", onHardwareBack);
|
|
return () => BackHandler.removeEventListener("hardwareBackPress", onHardwareBack);
|
|
}, [canGoBack, goBack])
|
|
);
|
|
return (
|
|
<View style={styles}>
|
|
<WebView
|
|
source={{ uri }}
|
|
allowsBackForwardNavigationGestures
|
|
ref={webViewRef}
|
|
onNavigationStateChange={(navState) => setCanGoBack(navState.canGoBack)}
|
|
onMessage={(event) => {
|
|
const { data } = event.nativeEvent;
|
|
const { type } = JSON.parse(data);
|
|
if (type === "back") return webViewRef.current?.goBack();
|
|
if (type === "windowClose") return goBack();
|
|
}}
|
|
/>
|
|
{useExitButton && <BigButton onPress={goBack} string="閉じる" />}
|
|
</View>
|
|
);
|
|
};
|
|
const styles: ViewProps["style"] = {
|
|
height: "100%",
|
|
backgroundColor: "#0099CC",
|
|
};
|