jrshikoku/components/settings.js
2022-04-14 03:10:12 +09:00

44 lines
2.2 KiB
JavaScript

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>
)
}