設定画面の設置

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