設定画面の設置

App.js

@@ -10,7 +10,9 @@ import tndView from './ndView';
 import trainbase from './trainbaseview';
 import howto from './howto';
 import menu from './menu';
+import News from './components/news.js';
 import TestArea from './TestArea.js';
+import Setting from './components/settings.js';
 const Stack = createStackNavigator();
 const Tab = createBottomTabNavigator();
 if (Platform.OS === 'android') {
@@ -26,7 +28,7 @@ export default function App(){
       <NavigationContainer name= "Root"  ref={navigationRef} style={{flex:1}}>
         <Tab.Navigator>
           <Stack.Screen name="login"   component={top}  options={{ tabBarLabel: '位置情報',headerTransparent:true,gestureEnabled:true,tabBarIcon: ({ color, size }) => (<AntDesign name="barchart"  size={32} />),}}/>
-          <Stack.Screen name="menu"   component={menu}  options={{ tabBarLabel: 'リンク',headerTransparent:true,gestureEnabled:true,tabBarIcon: ({ color, size }) => (<Ionicons name="ios-radio" size={platform}/>),}}/>
+          <Stack.Screen name="menuPage"   component={menuPage}  options={{ tabBarLabel: 'リンク',headerTransparent:true,gestureEnabled:true,tabBarIcon: ({ color, size }) => (<Ionicons name="ios-radio" size={platform}/>),}}/>
           <Stack.Screen name="home"   component={tndView}  options={{ tabBarLabel: '運行情報',headerTransparent:true,gestureEnabled:true,tabBarIcon: ({ color, size }) => (<Ionicons name="md-train" size={32}/>),}}/>
           
         </Tab.Navigator>
@@ -41,6 +43,15 @@ function top(){
       <Stack.Screen name="trainbase"   component={trainbase}  options={{ title: 'トレインビジョン',gestureEnabled:true,...TransitionPresets.SlideFromRightIOS}}/>
       <Stack.Screen name="howto"   component={howto}  options={{ title: '使い方',gestureEnabled:true,...TransitionPresets.ModalPresentationIOS,cardOverlayEnabled:true,headerTransparent:true,headerShown:false}}/>
       <Stack.Screen name="test"   component={TestArea} options={{}}/>
+      <Stack.Screen name="news" component={News} options={{gestureEnabled:true,...TransitionPresets.ModalPresentationIOS,cardOverlayEnabled:true,headerTransparent:true,headerShown:false}} />
+    </Stack.Navigator>
+  )
+}
+function menuPage(){
+  return(
+    <Stack.Navigator>
+      <Stack.Screen name="menu"   component={menu}  options={{headerShown: false,gestureEnabled:true,headerTransparent:true,}}/>
+      <Stack.Screen name="setting" component={Setting} options={{gestureEnabled:true,...TransitionPresets.ModalPresentationIOS,cardOverlayEnabled:true,headerTransparent:true,headerShown:false}} />
     </Stack.Navigator>
   )
 }

Apps.js

@@ -1,91 +1,47 @@
-import React, { useRef } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
-import {View, Platform} from 'react-native';
+import {View, Platform, ToastAndroid} from 'react-native';
 import {WebView} from 'react-native-webview';
-import Constants from 'expo-constants';/* 
+import Constants from 'expo-constants';
+import AsyncStorage from '@react-native-async-storage/async-storage';
+/* 
 import StatusbarDetect from './StatusbarDetect';
 var Status = StatusbarDetect(); */
+
 export var webview = null;
+
 export default function Apps (props) {
   const { navigation: { navigate } } = props;
   var urlcache="";
   const webview = useRef();
-  return (
+  const [iconSetting, setIconSetting] = useState(undefined)
-    <View style={{height:"100%",paddingTop: Constants.statusBarHeight,}}>
+  useEffect(()=>{
-      {/* {Status} */}
+    AsyncStorage.getItem("status")
-      <WebView 
+    .then(d=>{
-      useWebKit={true}
+      if(d != "2022/04/14"){
-      ref={webview}
+        navigate('news');
-      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={false}
-      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});
+    .catch(e=>{
-              if(Platform.OS==="android")navigate('trainbase', {info: event.url});
+      navigate('news');
-              webview?.current.goBack();
+    })
-            }
+  },[])
-          }
+  useEffect(()=>{
-        }
+    AsyncStorage.getItem("iconSwitch").then( d =>{
-      } 
+      if(d){
-      onMessage={(event)=>{}}
+        setIconSetting(d);
-      injectedJavaScript={INJECTED_JAVASCRIPT}/>
-    </View>
-  );
-}
-const INJECTED_JAVASCRIPT = `
-  const setStationIcon = (行き先アイコン,img) =>{
-    let newItem = document.createElement("div");
-    if(行き先アイコン.getAttribute("style").includes("left")){
-      行き先アイコン.insertAdjacentHTML('beforebegin', "<img src="+img+" style='float:left;height:20px;'>");
       }
       else{
-      行き先アイコン.insertAdjacentHTML('beforebegin', "<img src="+img+" style='float:right;height:20px;'>");
+        AsyncStorage.setItem("iconSwitch","true").then(()=>Updates.reloadAsync())
       }
-    行き先アイコン.remove();
-  }
-  var observer = new MutationObserver(()=>console.log(elem));
-  const elem = document.querySelector('#modal_content');
-  console.log(elem);
-  const config = { 
-    attributes: true, 
-    childList: true, 
-    characterData: true 
-  };
-
-  observer.observe(elem, config);
-  document.getElementById('header').querySelector('a').style.display = 'none';
-  document.getElementById('header').style.height = '50px';
-  document.getElementById('main').style.paddingTop = '54px';
-
-  document.getElementById('headerStr').style.display = 'none';
-  
-  setStrings();
-  function setStrings(){
-    try {
-      document.getElementById('refreshIcon').click();
-      var elements = document.querySelectorAll('[onclick]');
-      for (let element of elements) {
-        if(element.getAttribute('onclick').indexOf('ShowTrainTimeInfo') != -1){
-          var 行き先情報 = element.getElementsByTagName("p")[0];
-          var 列番データ = element.getAttribute('onclick').split('"')[1];
-          var flag=false;
-          var TrainType = undefined;
       
        
-          switch(列番データ){
+    }).catch(d=>AsyncStorage.setItem("iconSwitch","true").then(()=>Updates.reloadAsync()))
+  },[])
+  
+const fTrainIcon = iconSetting == "true" ?`JRF || setStationIcon(element.getElementsByTagName("img")[0],'http://www.trainfrontview.net/f/ef210a.png');`:``;
+const trainIcon = iconSetting == "true" ? `
+          
+switch(列番データ){
   //しおかぜメイン
   //8000 ノーマル
   case "2M":
@@ -105,6 +61,7 @@ const INJECTED_JAVASCRIPT = `
   case "17M":
   case "25M":
   case "27M":
+  case "29M":
     setStationIcon(element.getElementsByTagName("img")[0],'http://www.trainfrontview.net/b/s8000nr.png');
     break;
   //8000 アンパン
@@ -147,6 +104,7 @@ const INJECTED_JAVASCRIPT = `
   case "1017M":
   case "1025M":
   case "1027M":
+  case "1029M":
     setStationIcon(element.getElementsByTagName("img")[0],'http://www.trainfrontview.net/b/s8000no.png');
     break;
 
@@ -498,9 +456,48 @@ const INJECTED_JAVASCRIPT = `
   break;
   default:
     break;
+}
+
+` : ``;
+const INJECTED_JAVASCRIPT = `
+  const setStationIcon = (行き先アイコン,img) =>{
+    let newItem = document.createElement("div");
+    if(行き先アイコン.getAttribute("style").includes("left")){
+      行き先アイコン.insertAdjacentHTML('beforebegin', "<img src="+img+" style='float:left;height:20px;'>");
     }
+    else{
+      行き先アイコン.insertAdjacentHTML('beforebegin', "<img src="+img+" style='float:right;height:20px;'>");
+    }
+    行き先アイコン.remove();
+  }
+  var observer = new MutationObserver(()=>console.log(elem));
+  const elem = document.querySelector('#modal_content');
+  console.log(elem);
+  const config = { 
+    attributes: true, 
+    childList: true, 
+    characterData: true 
+  };
 
+  observer.observe(elem, config);
+  document.getElementById('header').querySelector('a').style.display = 'none';
+  document.getElementById('header').style.height = '50px';
+  document.getElementById('main').style.paddingTop = '54px';
 
+  document.getElementById('headerStr').style.display = 'none';
+  
+  setStrings();
+  function setStrings(){
+    try {
+      document.getElementById('refreshIcon').click();
+      var elements = document.querySelectorAll('[onclick]');
+      for (let element of elements) {
+        if(element.getAttribute('onclick').indexOf('ShowTrainTimeInfo') != -1){
+          var 行き先情報 = element.getElementsByTagName("p")[0];
+          var 列番データ = element.getAttribute('onclick').split('"')[1];
+          var flag=false;
+          var TrainType = undefined;
+          `+trainIcon+`
 
 
           
@@ -614,7 +611,7 @@ const INJECTED_JAVASCRIPT = `
 
           //列番付与
           行き先情報.innerText = 行き先情報.innerText+列番データ+(JRF ? "":"レ");
-          JRF || setStationIcon(element.getElementsByTagName("img")[0],'http://www.trainfrontview.net/f/ef210a.png');
+          `+fTrainIcon+`
         }
       }
       try{
@@ -709,3 +706,40 @@ const INJECTED_JAVASCRIPT = `
   }
 `;
 
+
+  return (
+    <View style={{height:"100%",paddingTop: Constants.statusBarHeight,}}>
+      {/* {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={false}
+      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)=>{}}
+      injectedJavaScript={INJECTED_JAVASCRIPT}/>
+    </View>
+  );
+}

components/news.js

@@ -0,0 +1,19 @@
+import React, {  } from 'react';
+import {View,Text,TouchableOpacity } from 'react-native';
+import {WebView} from 'react-native-webview';
+import StatusbarDetect from '../StatusbarDetect';
+import AsyncStorage from '@react-native-async-storage/async-storage';
+var Status = StatusbarDetect();
+export default function News(props){
+    const { navigation: { navigate } } = props;
+    return(
+        <View style={{height:"100%",backgroundColor:"#0099CC"}}>
+            <WebView useWebKit={true} source={{uri: 'https://nexcloud.haruk.in/sites/press-harukin/JRShikokuApps/2022-4-13'}}  mixedContentMode={'compatibility'} javaScriptEnabled={true}/>
+            <TouchableOpacity style={{padding:10,flexDirection:"row",borderColor:"white",borderWidth:1,margin:10,borderRadius:5,alignItems:"center"}} onPress={()=>{AsyncStorage.setItem('status', "2022/04/14");navigate('Apps');}}>
+              <View style={{flex:1}} />
+              <Text style={{fontSize:25,fontWeight:"bold",color:"white"}}>更新情報を閉じる</Text>
+              <View style={{flex:1}} />
+            </TouchableOpacity>
+        </View>
+    )
+}

components/settings.js

@@ -0,0 +1,44 @@
+import React, { useState, useEffect } from 'react';
+import {View,Text,TouchableOpacity } from 'react-native';
+import * as Updates from 'expo-updates';
+import StatusbarDetect from '../StatusbarDetect';
+import AsyncStorage from '@react-native-async-storage/async-storage';
+var Status = StatusbarDetect();
+import { Switch } from 'react-native-elements';
+
+export default function Setting(props){
+    const { navigation: { navigate } } = props;
+    const [iconSetting, setIconSetting] = useState(undefined)
+    useEffect(()=>{
+        AsyncStorage.getItem("iconSwitch").then( d =>{
+            setIconSetting(d)
+        })
+    },[])
+    console.log(iconSetting);
+    return(
+        <View style={{height:"100%",backgroundColor:"#0099CC"}}>
+            <View style={{flex:1,backgroundColor:"white"}}>
+                <View style={{backgroundColor:"#0099CC"}}>
+                    <Text style={{fontSize:30,fontWeight:"bold",textAlign:"center",color:"white",padding:10}}>設定画面</Text>
+                </View>
+                <View style={{flex:1}} >
+                    <View style={{flexDirection:"row",padding:10}}>
+                        <Text style={{fontSize:25,alignItems:"center",alignContent:"center",textAlign:"center",textAlignVertical:"center"}}>列車アイコンを表示する</Text>
+                        <View style={{flex:1}} />
+                        <Switch value={iconSetting == "true" ? true : false} color={iconSetting == "true" ? "red": null} onValueChange={(value)=>setIconSetting(value.toString())}/>
+                    </View>
+                    
+                </View>
+            </View>
+            <TouchableOpacity style={{padding:10,flexDirection:"row",borderColor:"white",borderWidth:1,margin:10,borderRadius:5,alignItems:"center"}} onPress={()=>{
+                AsyncStorage.setItem("iconSwitch",iconSetting.toString()).then(()=>{
+                    Updates.reloadAsync()
+                })
+                }}>
+              <View style={{flex:1}} />
+              <Text style={{fontSize:25,fontWeight:"bold",color:"white"}}>設定を保存して再読み込み</Text>
+              <View style={{flex:1}} />
+            </TouchableOpacity>
+        </View>
+    )
+}

package.json

@@ -8,6 +8,7 @@
   },
   "dependencies": {
     "@expo/vector-icons": "^12.0.0",
+    "@react-native-async-storage/async-storage": "^1.13.0",
     "@react-native-community/masked-view": "0.1.10",
     "@react-navigation/bottom-tabs": "^5.11.11",
     "@react-navigation/native": "^5.9.4",
@@ -34,6 +35,7 @@
     "react-native-router-flux": "^4.3.1",
     "react-native-safe-area-context": "3.2.0",
     "react-native-screens": "~3.0.0",
+    "react-native-storage": "^1.0.1",
     "react-native-svg": "12.1.0",
     "react-native-svg-uri": "^1.2.3",
     "react-native-vector-icons": "^8.1.0",

yarn.lock

@@ -2787,6 +2787,13 @@
   resolved "https://registry.yarnpkg.com/@protobufjs/utf8/-/utf8-1.1.0.tgz#a777360b5b39a1a2e5106f8e858f2fd2d060c570"
   integrity sha1-p3c2C1s5oaLlEG+OhY8v0tBgxXA=
 
+"@react-native-async-storage/async-storage@^1.13.0":
+  version "1.17.3"
+  resolved "https://registry.yarnpkg.com/@react-native-async-storage/async-storage/-/async-storage-1.17.3.tgz#fa7010aa9b6a811ff653df3698a90d3c173dd6a6"
+  integrity sha512-2dxdlGwBjBP2qYu6F72U7cRRFshISYiNEWCaQNOJtxUERCMaYRWcniYqhL248KSbGUMpRhFCEtliztsiGoYYMA==
+  dependencies:
+    merge-options "^3.0.4"
+
 "@react-native-community/cli-debugger-ui@^4.13.1":
   version "4.13.1"
   resolved "https://registry.yarnpkg.com/@react-native-community/cli-debugger-ui/-/cli-debugger-ui-4.13.1.tgz#07de6d4dab80ec49231de1f1fbf658b4ad39b32c"
@@ -5915,6 +5922,11 @@ is-plain-obj@^1.0.0:
   resolved "https://registry.yarnpkg.com/is-plain-obj/-/is-plain-obj-1.1.0.tgz#71a50c8429dfca773c92a390a4a03b39fcd51d3e"
   integrity sha1-caUMhCnfync8kqOQpKA7OfzVHT4=
 
+is-plain-obj@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/is-plain-obj/-/is-plain-obj-2.1.0.tgz#45e42e37fccf1f40da8e5f76ee21515840c09287"
+  integrity sha512-YWnfyRwxL/+SsrWYfOpUtz5b3YD+nyfkHvjbcanzk8zgyO4ASD67uVMRt8k5bM4lLMDnXfriRhOpemw+NfT1eA==
+
 is-plain-object@^2.0.3, is-plain-object@^2.0.4:
   version "2.0.4"
   resolved "https://registry.yarnpkg.com/is-plain-object/-/is-plain-object-2.0.4.tgz#2c163b3fafb1b606d9d17928f05c2a1c38e07677"
@@ -6685,6 +6697,13 @@ mdn-data@2.0.14:
   resolved "https://registry.yarnpkg.com/mdn-data/-/mdn-data-2.0.14.tgz#7113fc4281917d63ce29b43446f701e68c25ba50"
   integrity sha512-dn6wd0uw5GsdswPFfsgMp5NSB0/aDe6fK94YJV/AJDYXL6HVLWBsxeq7js7Ad+mU2K9LAlwpk6kN2D5mwCPVow==
 
+merge-options@^3.0.4:
+  version "3.0.4"
+  resolved "https://registry.yarnpkg.com/merge-options/-/merge-options-3.0.4.tgz#84709c2aa2a4b24c1981f66c179fe5565cc6dbb7"
+  integrity sha512-2Sug1+knBjkaMsMgf1ctR1Ujx+Ayku4EdJN4Z+C2+JzoeF7A3OZ9KM2GY0CpQS51NR61LTurMJrRKPhSs3ZRTQ==
+  dependencies:
+    is-plain-obj "^2.1.0"
+
 merge-stream@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/merge-stream/-/merge-stream-1.0.1.tgz#4041202d508a342ba00174008df0c251b8c135e1"
@@ -8347,6 +8366,14 @@ react-native-size-matters@^0.3.1:
   resolved "https://registry.yarnpkg.com/react-native-size-matters/-/react-native-size-matters-0.3.1.tgz#24d0cfc335a2c730f6d58bd7b43ea5a41be4b49f"
   integrity sha512-mKOfBLIBFBcs9br1rlZDvxD5+mAl8Gfr5CounwJtxI6Z82rGrMO+Kgl9EIg3RMVf3G855a85YVqHJL2f5EDRlw==
 
+react-native-storage@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/react-native-storage/-/react-native-storage-1.0.1.tgz#2c493875ff76ec301987c951a8302f3a54381241"
+  integrity sha512-fXT2+zhkfHj3E1/ekbymO8JwcDGgnxeWBiNIa7Al14qB4i3MSOF88nyjIRuTyBsEwZl/f6JG7l+zwd/20+bmlA==
+  dependencies:
+    opencollective "^1.0.3"
+    opencollective-postinstall "^2.0.2"
+
 react-native-svg-uri@^1.2.3:
   version "1.2.3"
   resolved "https://registry.yarnpkg.com/react-native-svg-uri/-/react-native-svg-uri-1.2.3.tgz#2f67f30564068a0fee68a751845332a5185a1aab"