設定画面の設置
This commit is contained in:
harukin-DeskMini
parent
5411071dbd
commit
79e8865dc9
13
App.js
13
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>
|
||||
)
|
||||
}
|
||||
184
Apps.js
184
Apps.js
@ -1,91 +1,47 @@
|
||||
import React, { useRef } from 'react';
|
||||
import {View, Platform} from 'react-native';
|
||||
import React, { useEffect, useRef, useState } from 'react';
|
||||
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 (
|
||||
<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();
|
||||
const [iconSetting, setIconSetting] = useState(undefined)
|
||||
useEffect(()=>{
|
||||
AsyncStorage.getItem("status")
|
||||
.then(d=>{
|
||||
if(d != "2022/04/14"){
|
||||
navigate('news');
|
||||
}
|
||||
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>
|
||||
);
|
||||
}
|
||||
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;'>");
|
||||
})
|
||||
.catch(e=>{
|
||||
navigate('news');
|
||||
})
|
||||
},[])
|
||||
useEffect(()=>{
|
||||
AsyncStorage.getItem("iconSwitch").then( d =>{
|
||||
if(d){
|
||||
setIconSetting(d);
|
||||
}
|
||||
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>
|
||||
);
|
||||
}
|
||||
19
components/news.js
Normal file
19
components/news.js
Normal file
@ -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>
|
||||
)
|
||||
}
|
||||
44
components/settings.js
Normal file
44
components/settings.js
Normal file
@ -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>
|
||||
)
|
||||
}
|
||||
@ -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",
|
||||
|
||||
27
yarn.lock
27
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"
|
||||
|
||||
Loading…
Reference in New Issue
Block a user