harukin/jrshikoku
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

トップメニューのデザイン改修と地図表示の最適化

Browse Source
This commit is contained in:
harukin-DeskMini
2022-09-27 13:28:26 +09:00
parent 6b280a51d7
commit b234b056c3
4 changed files with 552 additions and 257 deletions
Download Patch File Download Diff File Expand all files Collapse all files

197
components/settings.js
View File

@@ -1,66 +1,137 @@
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';
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';
import { Switch } from "react-native-elements";
export default function Setting(props){
const { navigation: { navigate } } = props;
const [iconSetting, setIconSetting] = useState(undefined)
const [mapSwitch, setMapSwitch] = useState(undefined)
useEffect(()=>{
AsyncStorage.getItem("iconSwitch").then( d =>{
setIconSetting(d)
})
AsyncStorage.getItem("mapSwitch").then( d =>{
setMapSwitch(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 style={{flexDirection:"row",padding:10}}>
<Text style={{fontSize:25,alignItems:"center",alignContent:"center",textAlign:"center",textAlignVertical:"center"}}>channel: {Updates.channel}</Text>
<View style={{flex:1}} />
</View>
<View style={{flexDirection:"row",padding:10}}>
<Text style={{fontSize:25,alignItems:"center",alignContent:"center",textAlign:"center",textAlignVertical:"center"}}>releaseChannel: {Updates.releaseChannel}</Text>
<View style={{flex:1}} />
</View>
<View style={{flexDirection:"row",padding:10}}>
<Text style={{fontSize:25,alignItems:"center",alignContent:"center",textAlign:"center",textAlignVertical:"center"}}>マップを表示する(beta)</Text>
<View style={{flex:1}} />
<Switch value={mapSwitch == "true" ? true : false} color={mapSwitch == "true" ? "red": null} onValueChange={(value)=>setMapSwitch(value.toString())}/>
</View>
</View>
</View>
<TouchableOpacity style={{padding:10,flexDirection:"row",borderColor:"white",borderWidth:1,margin:10,borderRadius:5,alignItems:"center"}} onPress={()=>{
Promise.all([
AsyncStorage.setItem("iconSwitch",iconSetting.toString()),
AsyncStorage.setItem("mapSwitch",mapSwitch.toString())
])
.then(()=>{
Updates.reloadAsync()
})
}}>
<View style={{flex:1}} />
<Text style={{fontSize:25,fontWeight:"bold",color:"white"}}>設定を保存して再読み込み</Text>
<View style={{flex:1}} />
</TouchableOpacity>
export default function Setting(props) {
const {
navigation: { navigate },
} = props;
const [iconSetting, setIconSetting] = useState(undefined);
const [mapSwitch, setMapSwitch] = useState(undefined);
useEffect(() => {
AsyncStorage.getItem("iconSwitch").then((d) => {
setIconSetting(d);
});
AsyncStorage.getItem("mapSwitch").then((d) => {
setMapSwitch(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 style={{ flexDirection: "row", padding: 10 }}>
<Text
style={{
fontSize: 25,
alignItems: "center",
alignContent: "center",
textAlign: "center",
textAlignVertical: "center",
}}
>
内部バージョン: 4.3.1
</Text>
<View style={{ flex: 1 }} />
</View>
<View style={{ flexDirection: "row", padding: 10 }}>
<Text
style={{
fontSize: 25,
alignItems: "center",
alignContent: "center",
textAlign: "center",
textAlignVertical: "center",
}}
>
releaseChannel: {Updates.releaseChannel}
</Text>
<View style={{ flex: 1 }} />
</View>
<View style={{ flexDirection: "row", padding: 10 }}>
<Text
style={{
fontSize: 25,
alignItems: "center",
alignContent: "center",
textAlign: "center",
textAlignVertical: "center",
}}
>
マップを表示する(beta)
</Text>
<View style={{ flex: 1 }} />
<Switch
value={mapSwitch == "true" ? true : false}
color={mapSwitch == "true" ? "red" : null}
onValueChange={(value) => setMapSwitch(value.toString())}
/>
</View>
</View>
</View>
<TouchableOpacity
style={{
padding: 10,
flexDirection: "row",
borderColor: "white",
borderWidth: 1,
margin: 10,
borderRadius: 5,
alignItems: "center",
}}
onPress={() => {
Promise.all([
AsyncStorage.setItem("iconSwitch", iconSetting.toString()),
AsyncStorage.setItem("mapSwitch", mapSwitch.toString()),
]).then(() => {
Updates.reloadAsync();
});
}}
>
<View style={{ flex: 1 }} />
<Text style={{ fontSize: 25, fontWeight: "bold", color: "white" }}>
設定を保存して再読み込み
</Text>
<View style={{ flex: 1 }} />
</TouchableOpacity>
</View>
);
}