jrshikoku/Apps.js

import React, { useEffect, useRef, useState } from "react";
import {
  View,
  Platform,
  ToastAndroid,
  Text,
  TouchableOpacity,
} from "react-native";
import { WebView } from "react-native-webview";
import Constants from "expo-constants";
import AsyncStorage from "@react-native-async-storage/async-storage";
import { news } from "./config/newsUpdate";
import { getStationList } from "./lib/getStationList";
import { StationDeteilView } from "./components/ActionSheetComponents/StationDeteilView";
import { injectJavascriptData } from "./lib/webViewInjectjavascript";
import { getStationList2 } from "./lib/getStationList2";
/* 
import StatusbarDetect from './StatusbarDetect';
var Status = StatusbarDetect(); */

export default function Apps(props) {
  const {
    navigation: { navigate },
  } = props;
  var urlcache = "";
  const webview = useRef();
  //画面表示関連
  const [iconSetting, setIconSetting] = useState(undefined);
  const [mapSwitch, setMapSwitch] = useState(undefined);

  //地図用
  const [mapsStationData, setMapsStationData] = useState(undefined);
  useEffect(() => {
    getStationList2().then((data) => {
      setMapsStationData(data);
    });
  }, []);

  //駅情報画面用
  const StationBoardAcSR = useRef(null);
  const [currentStation, setCurrentStation] = useState(undefined);
  const [originalStationList, setOriginalStationList] = useState();
  useEffect(() => {
    getStationList().then((stationList) => {
      console.log(stationList);
      setOriginalStationList(stationList);
    });
  }, []);

  //地図表示テキスト
  const injectJavascript = injectJavascriptData(mapSwitch, iconSetting);

  useEffect(() => {
    //ニュース表示
    AsyncStorage.getItem("status")
      .then((d) => {
        if (d != news) navigate("news");
      })
      .catch((e) => navigate("news"));

    //列車アイコンスイッチ
    AsyncStorage.getItem("iconSwitch")
      .then((d) => {
        if (d) {
          setIconSetting(d);
        } else {
          AsyncStorage.setItem("iconSwitch", "true").then(() =>
            Updates.reloadAsync()
          );
        }
      })
      .catch((d) =>
        AsyncStorage.setItem("iconSwitch", "true").then(() =>
          Updates.reloadAsync()
        )
      );

    //地図スイッチ
    AsyncStorage.getItem("mapSwitch")
      .then((d) => {
        if (d) {
          setMapSwitch(d);
        } else {
          AsyncStorage.setItem("mapSwitch", "false").then(() =>
            Updates.reloadAsync()
          );
        }
      })
      .catch((d) =>
        AsyncStorage.setItem("mapSwitch", "false").then(() =>
          Updates.reloadAsync()
        )
      );
  }, []);

  return (
    <View
      style={{
        height: "100%",
        paddingTop: Platform.OS == "ios" ? Constants.statusBarHeight : 0,
      }}
    >
      {/* {Status} */}
      <WebView
        useWebKit={true}
        ref={webview}
        source={{ uri: "https://train.jr-shikoku.co.jp/sp.html" }}
        originWhitelist={[
          "https://train.jr-shikoku.co.jp",
          "https://train.jr-shikoku.co.jp/sp.html",
        ]}
        mixedContentMode={"compatibility"}
        javaScriptEnabled={true}
        allowsBackForwardNavigationGestures={true}
        setSupportMultipleWindows={true}
        onNavigationStateChange={(event) => {
          console.log(event);
          if (event.url != urlcache) {
            //URL二重判定回避
            urlcache = event.url;

            if (
              event.url.includes("https://train.jr-shikoku.co.jp/usage.htm")
            ) {
              if (Platform.OS === "android") navigate("howto");
              webview?.current.goBack();
              //Actions.howto();
            } else if (
              event.url.includes("https://train.jr-shikoku.co.jp/train.html")
            ) {
              //Actions.trainbase({info: event.url});
              if (Platform.OS === "android")
                navigate("trainbase", { info: event.url });
              webview?.current.goBack();
            }
          }
        }}
        onMessage={(event) => {
          console.log(event.nativeEvent.data);
          navigate("trainbase", { info: event.nativeEvent.data });
        }}
        injectedJavaScript={injectJavascript}
      />
      <TouchableOpacity
        onPress={() =>
          navigate("trainMenu", { webview, stationData: mapsStationData })
        }
        style={{
          position: "absolute",
          top: Platform.OS == "ios" ? Constants.statusBarHeight : 0,
          left: 10,
          width: 50,
          height: 50,
          backgroundColor: "#0099CC",
          borderColor: "white",
          borderStyle: "solid",
          borderWidth: 1,
          borderRadius: 50,
          alignContent: "center",
          alignSelf: "center",
          alignItems: "center",
          display: mapSwitch == "true" ? "flex" : "none",
        }}
      >
        <View style={{ flex: 1 }} />
        <Text
          style={{
            textAlign: "center",
            width: "auto",
            height: "auto",
            textAlignVertical: "center",
            fontWeight: "bold",
            color: "white",
          }}
        >
          三
        </Text>
        <View style={{ flex: 1 }} />
      </TouchableOpacity>

      <StationDeteilView
        StationBoardAcSR={StationBoardAcSR}
        currentStation={currentStation}
        originalStationList={originalStationList}
      />
    </View>
  );
}