jrshikoku/ndView.js
harukin-expo-dev-env 6842b2f724 menu要素の分離
2024-03-19 11:55:31 +00:00

64 lines
1.8 KiB
JavaScript

import React, { useRef, useState } from "react";
import { View, Platform, TouchableOpacity } from "react-native";
import { WebView } from "react-native-webview";
import Constants from "expo-constants";
import { Ionicons } from "@expo/vector-icons";
export default function tndView() {
const webview = useRef();
const jsa = `
document.querySelector('.sitettl').style.display = 'none';
document.querySelector('.attention').style.display = 'none';
`;
return (
<View
style={{
backgroundColor: "#309AC3",
height: "100%",
paddingTop: Platform.OS == "ios" ? Constants.statusBarHeight : 0,
}}
>
<WebView
useWebKit={true}
ref={webview}
source={{ uri: "https://www.jr-shikoku.co.jp/info/" }}
originWhitelist={["https://www.jr-shikoku.co.jp"]}
mixedContentMode={"compatibility"}
javaScriptEnabled={true}
injectedJavaScript={jsa}
pullToRefreshEnabled
onError={() => this.webView?.reload()}
/>
<ReloadButton
onPress={() => webview.current?.reload()}
top={Platform.OS == "ios" ? Constants.statusBarHeight : 0}
/>
</View>
);
}
const ReloadButton = ({ onPress, top, mapSwitch, LoadError = false }) => {
const styles = {
position: "absolute",
top,
right: 10,
width: 50,
height: 50,
backgroundColor: LoadError ? "red" : "#0099CC",
borderColor: "white",
borderStyle: "solid",
borderWidth: 1,
borderRadius: 50,
alignContent: "center",
alignSelf: "center",
alignItems: "center",
display: mapSwitch,
};
return (
<TouchableOpacity onPress={onPress} style={styles}>
<View style={{ flex: 1 }} />
<Ionicons name="reload" color="white" size={30} />
<View style={{ flex: 1 }} />
</TouchableOpacity>
);
};