投稿機能へのウィンドウを作成

GeneralWebView.tsx

@@ -0,0 +1,30 @@
+import React, { CSSProperties } from "react";
+import { View, ViewProps } from "react-native";
+import { WebView } from "react-native-webview";
+import { BigButton } from "./components/atom/BigButton";
+import { useNavigation } from "@react-navigation/native";
+export default ({ route }) => {
+  if (!route.params) {
+    return null;
+  }
+  const { uri, useExitButton = true } = route.params;
+  const { goBack } = useNavigation();
+  return (
+    <View style={styles}>
+      <WebView
+        useWebKit
+        source={{ uri }}
+        onMessage={(event) => {
+          const { data } = event.nativeEvent;
+          const {type} = JSON.parse(data);
+          if (type === "windowClose") return goBack();
+        }}
+      />
+      {useExitButton && <BigButton onPress={goBack} string="閉じる" />}
+    </View>
+  );
+};
+const styles: ViewProps["style"] = {
+  height: "100%",
+  backgroundColor: "#0099CC",
+};

MenuPage.js

@@ -18,6 +18,7 @@ import AllTrainDiagramView from "./components/AllTrainDiagramView";
 import { useNavigation } from "@react-navigation/native";
 import { news } from "./config/newsUpdate";
 import { useBottomTabBarHeight } from "@react-navigation/bottom-tabs";
+import GeneralWebView from "./GeneralWebView";
 const Stack = createStackNavigator();
 
 export function MenuPage() {
@@ -128,6 +129,7 @@ export function MenuPage() {
         component={AllTrainDiagramView}
       />
       <Stack.Screen name="howto" options={optionData} component={HowTo} />
+      <Stack.Screen name="generalWebView" options={optionData} component={GeneralWebView} />
     </Stack.Navigator>
   );
 }

Top.js

@@ -13,6 +13,7 @@ import { useTrainMenu } from "./stateBox/useTrainMenu";
 import { AS } from "./storageControl";
 import { news } from "./config/newsUpdate";
 import { Linking, Platform } from "react-native";
+import GeneralWebView from "./GeneralWebView";
 const Stack = createStackNavigator();
 export const Top = () => {
   const { webview } = useCurrentTrain();
@@ -64,6 +65,7 @@ export const Top = () => {
         component={TrainBase}
       />
       <Stack.Screen name="howto" options={optionData} component={HowTo} />
+      <Stack.Screen name="generalWebView" options={optionData} component={GeneralWebView} />
       <Stack.Screen name="news" options={optionData} component={News} />
       <Stack.Screen
         name="trainMenu"

components/ActionSheetComponents/EachTrainInfoCore/HeaderText.tsx

@@ -1,5 +1,5 @@
 import React, { CSSProperties, FC, useEffect, useMemo, useState } from "react";
-import { Text, View, LayoutAnimation, TextStyle } from "react-native";
+import { Text, View, LayoutAnimation, TextStyle, TouchableOpacity } from "react-native";
 import { Ionicons } from "@expo/vector-icons";
 import { SheetManager } from "react-native-actions-sheet";
 import { getType } from "../../../lib/eachTrainInfoCoreLib/getType";
@@ -120,8 +120,15 @@ export const HeaderText: FC<Props> = ({
   return (
     <View style={{ padding: 10, flexDirection: "row", alignItems: "center" }}  onTouchStart={()=>scrollHandlers.ref.current?.scrollTo({ y: 0, animated: true })}>
       <TrainIconStatus {...{ data, navigate, from }} />
-      <View
+      <TouchableOpacity
         style={{ borderRadius: 5, flexDirection: "row", alignItems: "center" }}
+        onLongPress={() => {
+          navigate("generalWebView", {
+            uri: "https://jr-shikoku-data-post-system.pages.dev?trainNum=" + trainNum,
+            useExitButton: false
+          });
+          SheetManager.hide("EachTrainInfo");
+        }}
       >
         <Text
           style={{
@@ -137,7 +144,7 @@ export const HeaderText: FC<Props> = ({
         {isOneMan && <OneManText />}
         <Text style={textConfig}>{trainName}</Text>
         <InfogramText infogram={infogram} />
-      </View>
+      </TouchableOpacity>
 
       <View style={{ flex: 1 }} />
       <Text style={textConfig}>