PDF表示機能を部分実験実装

App.js

@@ -194,7 +194,6 @@ const Top = ({
       <Stack.Screen
         name="howto"
         options={{
-          title: "使い方",
           ...optionData,
         }}
       >
@@ -284,6 +283,14 @@ function MenuPage({
       >
         {(props) => <TrainBase {...props} />}
       </Stack.Screen>
+      <Stack.Screen
+        name="howto"
+        options={{
+          ...optionData,
+        }}
+      >
+        {(props) => <HowTo {...props} />}
+      </Stack.Screen>
     </Stack.Navigator>
   );
 }

Apps.js

@@ -148,7 +148,7 @@ export default function Apps({
       urlcache = event.url;
 
       if (event.url.includes("https://train.jr-shikoku.co.jp/usage.htm")) {
-        if (Platform.OS === "android") navigate("howto");
+        if (Platform.OS === "android") navigate("howto", { info: event.url });
         webview?.current.goBack();
         //Actions.howto();
       } else if (
@@ -224,6 +224,11 @@ export default function Apps({
         favoriteStation={favoriteStation}
         setFavoriteStation={setFavoriteStation}
         busAndTrainData={busAndTrainData}
+        navigate={navigate}
+        onExit={() => {
+          StationBoardAcSR.current?.setModalVisible();
+          navigate("Apps");
+        }}
       />
     </View>
   );

components/ActionSheetComponents/StationDeteilView.js

@@ -29,6 +29,8 @@ export const StationDeteilView = (props) => {
     favoriteStation,
     setFavoriteStation,
     busAndTrainData,
+    navigate,
+    onExit,
   } = props;
   const [trainBus, setTrainBus] = useState();
   useEffect(() => {
@@ -82,7 +84,15 @@ export const StationDeteilView = (props) => {
                 originalStationList={originalStationList}
                 favoriteStation={favoriteStation}
                 setFavoriteStation={setFavoriteStation}
-                oP={() => Linking.openURL(currentStation[0].StationTimeTable)}
+                oP={() => {
+                  navigate("howto", {
+                    info: `https://docs.google.com/viewer?url=${encodeURI(
+                      currentStation[0].StationTimeTable
+                    )}&embedded=true`,
+                    onExit,
+                  });
+                  StationBoardAcSR.current?.hide();
+                }}
               />
             </View>
           )}
@@ -99,6 +109,15 @@ export const StationDeteilView = (props) => {
             currentStation[0].JrHpUrl &&
             currentStation[0].StationNumber != "M12" && (
               <駅構内図 //高松/阿波池田&後免&須崎kounai.png児島例外/
+                oP={() => {
+                  navigate("howto", {
+                    info:
+                      currentStation[0].JrHpUrl.replace("/index.html", "/") +
+                      "/kounai_map.html",
+                    onExit,
+                  });
+                  StationBoardAcSR.current?.hide();
+                }}
                 uri={currentStation[0].JrHpUrl.replace("/index.html", "/")}
               />
             )}
@@ -312,7 +331,7 @@ const 駅構内図 = (props) => {
           alignItems: "center",
           margin: 2,
         }}
-        onPress={() => Linking.openURL(props.uri + "/kounai_map.html")}
+        onPress={props.oP}
         //onPress={() => setOpen(!open)}
       >
         <View style={{ flex: 1 }} />

components/trainMenu.js

@@ -58,7 +58,11 @@ export default function TrainMenu({
           backgroundColor={"#F89038"}
           icon="train-car"
           flex={1}
-          onPressButton={() => navigate("howto")}
+          onPressButton={() =>
+            navigate("howto", {
+              info: "https://train.jr-shikoku.co.jp/usage.htm",
+            })
+          }
         >
           使い方
         </UsefulBox>

howto.js

@@ -2,21 +2,22 @@ const WEBVIEW = "WEBVIEW";
 import React, { Component } from "react";
 import { StatusBar, View, TouchableOpacity, Text } from "react-native";
 import { WebView } from "react-native-webview";
-export default ({ navigation: { navigate } }) => (
+export default ({ navigation: { navigate }, route }) => {
-  <View style={styles.View}>
+  const { info, onExit = () => navigate("Apps") } = route.params;
-    <WebView
+
-      useWebKit
+  return (
-      source={{ uri: "https://train.jr-shikoku.co.jp/usage.htm" }}
+    <View style={styles.View}>
-    />
+      <WebView useWebKit source={{ uri: info }} />
-    <TouchableOpacity style={styles.touch} onPress={() => navigate("Apps")}>
+      <TouchableOpacity style={styles.touch} onPress={onExit}>
-      <View style={{ flex: 1 }} />
+        <View style={{ flex: 1 }} />
-      <Text style={{ fontSize: 25, fontWeight: "bold", color: "white" }}>
+        <Text style={{ fontSize: 25, fontWeight: "bold", color: "white" }}>
-        閉じる
+          閉じる
-      </Text>
+        </Text>
-      <View style={{ flex: 1 }} />
+        <View style={{ flex: 1 }} />
-    </TouchableOpacity>
+      </TouchableOpacity>
-  </View>
+    </View>
-);
+  );
+};
 const styles = {
   View: { height: "100%", backgroundColor: "#0099CC" },
   touch: {

menu.js

@@ -218,6 +218,11 @@ export default function Menu(props) {
         favoriteStation={favoriteStation}
         setFavoriteStation={setFavoriteStation}
         busAndTrainData={busAndTrainData}
+        navigate={navigate}
+        onExit={() => {
+          StationBoardAcSR.current?.setModalVisible();
+          navigate("menu");
+        }}
       />
       <JRSTraInfo
         JRSTraInfoEXAcSR={JRSTraInfoEXAcSR}