119 lines
3.7 KiB
TypeScript
119 lines
3.7 KiB
TypeScript
import React, { useState } from "react";
|
||
import {
|
||
View,
|
||
Text,
|
||
TouchableOpacity,
|
||
ScrollView,
|
||
Image,
|
||
ToastAndroid,
|
||
Platform,
|
||
} from "react-native";
|
||
import { useNavigation } from "@react-navigation/native";
|
||
import * as Updates from "expo-updates";
|
||
import { AS } from "../../storageControl";
|
||
import { STORAGE_KEYS } from "@/constants";
|
||
import icons from "../../assets/icons/icons";
|
||
import { setAlternateAppIcon, getAppIconName } from "expo-alternate-app-icons";
|
||
import { widthPercentageToDP } from "react-native-responsive-screen";
|
||
import { SheetHeaderItem } from "../atom/SheetHeaderItem";
|
||
|
||
export const LauncherIconSettings = () => {
|
||
const { goBack } = useNavigation();
|
||
const [iconList] = useState(icons());
|
||
const [currentIcon] = useState(getAppIconName());
|
||
return (
|
||
<View style={{ height: "100%", backgroundColor: "#0099CC" }}>
|
||
<SheetHeaderItem title="アイコン設定" LeftItem={{ title: "＜ 設定", onPress: goBack }} />
|
||
<ScrollView style={{ flex: 1, backgroundColor: "white" }}>
|
||
{currentIcon ? (
|
||
<>
|
||
<Text
|
||
style={{
|
||
backgroundColor: "#DDDDDD",
|
||
}}
|
||
>
|
||
現在のアイコン:
|
||
{iconList.filter(({ id }) => id == currentIcon)[0].id}
|
||
</Text>
|
||
|
||
<View
|
||
style={{
|
||
flexDirection: "cokumn",
|
||
alignItems: "center",
|
||
justifyContent: "center",
|
||
backgroundColor: "#DDDDDD",
|
||
padding: 10,
|
||
}}
|
||
>
|
||
<Image
|
||
source={iconList.filter(({ id }) => id == currentIcon)[0].icon}
|
||
style={{
|
||
width: 50,
|
||
height: 50,
|
||
padding: 30,
|
||
borderWidth: 1,
|
||
borderRadius: 10,
|
||
borderColor: "white",
|
||
margin: 10,
|
||
backgroundColor: "white",
|
||
}}
|
||
/>
|
||
<Text>JR四国非公式アプリ</Text>
|
||
</View>
|
||
</>
|
||
) : (
|
||
<></>
|
||
)}
|
||
<View
|
||
style={{
|
||
flexDirection: "row",
|
||
flexWrap: "wrap",
|
||
alignContent: "center",
|
||
justifyContent: "center",
|
||
}}
|
||
>
|
||
{iconList.map(({ name, icon, id }) => {
|
||
return (
|
||
<TouchableOpacity
|
||
key={id}
|
||
style={{
|
||
margin: 10,
|
||
alignItems: "center",
|
||
justifyContent: "center",
|
||
width: widthPercentageToDP("30%"),
|
||
maxWidth: 60,
|
||
height: 100,
|
||
|
||
borderColor: "#999999",
|
||
borderWidth: id == currentIcon ? 2 : 0,
|
||
borderRadius: 10,
|
||
}}
|
||
onPress={() => {
|
||
setAlternateAppIcon(id)
|
||
.then((res) => {
|
||
AS.setItem(STORAGE_KEYS.ICON_SETTING, "true");
|
||
if (Platform.OS === "android") {
|
||
ToastAndroid.show(
|
||
"アイコンを変更しました。アプリを再起動します。",
|
||
ToastAndroid.SHORT
|
||
);
|
||
} else if (Platform.OS === "ios") {
|
||
Updates.reloadAsync();
|
||
}
|
||
})
|
||
.catch((err) => {
|
||
alert(err);
|
||
});
|
||
}}
|
||
>
|
||
<Image source={icon} style={{ width: 50, height: 50 }} />
|
||
<Text>{id}</Text>
|
||
</TouchableOpacity>
|
||
);
|
||
})}
|
||
</View>
|
||
</ScrollView>
|
||
</View>
|
||
);
|
||
};
|