From 0838414540335b9e85a90b9235aa2cf424670fd4 Mon Sep 17 00:00:00 2001 From: harukin-expo-dev-env Date: Mon, 10 Mar 2025 15:24:11 +0000 Subject: [PATCH] =?UTF-8?q?=E3=82=A2=E3=82=A4=E3=82=B3=E3=83=B3=E6=9B=B4?= =?UTF-8?q?=E6=96=B0=E7=94=BB=E9=9D=A2=E3=82=92=E4=BD=9C=E6=88=90?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- MenuPage.js | 8 +- .../ActionSheetComponents/TrainIconUpdate.tsx | 180 ++++++++++++++++++ components/ActionSheetComponents/sheets.ts | 2 + components/Settings/LauncherIconSettings.js | 38 ++-- index.js | 1 + 5 files changed, 210 insertions(+), 19 deletions(-) create mode 100644 components/ActionSheetComponents/TrainIconUpdate.tsx diff --git a/MenuPage.js b/MenuPage.js index 88e19ef..dc198b5 100644 --- a/MenuPage.js +++ b/MenuPage.js @@ -1,6 +1,6 @@ import React, { useEffect } from "react"; import { createStackNavigator } from "@react-navigation/stack"; -import { CommonActions } from "@react-navigation/native"; +import { SheetManager } from "react-native-actions-sheet"; import { AS } from "./storageControl"; import TrainBase from "./components/trainbaseview"; import HowTo from "./howto"; @@ -9,7 +9,6 @@ import News from "./components/news"; import Setting from "./components/Settings/settings"; import { useFavoriteStation } from "./stateBox/useFavoriteStation"; import { optionData } from "./lib/stackOption"; -import CurrentTrainListView from "./components/CurrentTrainListView"; import AllTrainDiagramView from "./components/AllTrainDiagramView"; import { useCurrentTrain } from "./stateBox/useCurrentTrain"; import { useNavigation } from "@react-navigation/native"; @@ -37,6 +36,11 @@ export function MenuPage() { if (d != news) navigation.navigate("topMenu", { screen: "news" }); }) .catch(() => navigation.navigate("topMenu", { screen: "news" })); + AS.getItem("isSetIcon") + .then((isSetIcon) => { + if (isSetIcon == "true") SheetManager.show("TrainIconUpdate"); + }) + .catch((error) => console.error("Error fetching icon setting:", error)); }, []); useEffect(() => { const unsubscribe = addListener("tabPress", (e) => { diff --git a/components/ActionSheetComponents/TrainIconUpdate.tsx b/components/ActionSheetComponents/TrainIconUpdate.tsx new file mode 100644 index 0000000..6e1add3 --- /dev/null +++ b/components/ActionSheetComponents/TrainIconUpdate.tsx @@ -0,0 +1,180 @@ +import React, { useEffect, useRef, useState } from "react"; +import { + View, + Text, + TouchableOpacity, + Platform, + Image, + BackHandler, +} from "react-native"; +import { MaterialCommunityIcons } from "@expo/vector-icons"; +import ActionSheet, { SheetManager } from "react-native-actions-sheet"; +import { useSafeAreaInsets } from "react-native-safe-area-context"; +import ViewShot from "react-native-view-shot"; +import * as Sharing from "expo-sharing"; +import icons from "../../assets/icons/icons"; + +import { getAppIconName } from "expo-alternate-app-icons"; +import { AS } from "@/storageControl"; +export const TrainIconUpdate = () => { + const [iconList] = useState(icons()); + const [currentIcon] = useState(getAppIconName()); + const actionSheetRef = useRef(null); + const insets = useSafeAreaInsets(); + const viewShot = useRef(null); + + + const onCapture = async () => { + const url = await viewShot.current.capture(); + + const ok = await Sharing.isAvailableAsync(); + if (ok) { + await Sharing.shareAsync( + "file://" + url, + (options = { mimeType: "image/jpeg", dialogTitle: "Share this image" }) + ); + } + }; + + return ( + } + onClose={() => { + AS.setItem("isSetIcon", "false"); + }} + ref={actionSheetRef} + isModal={Platform.OS == "ios"} + containerStyle={ + Platform.OS == "android" + ? { + paddingBottom: insets.bottom, + } + : {} + } + useBottomSafeAreaPadding={Platform.OS == "android"} + > + + + + + + + + + アイコンを変更しました！ + + + + {currentIcon ? ( + + id == currentIcon)[0].icon} + style={{ + width: 50, + height: 50, + padding: 30, + borderWidth: 1, + borderRadius: 10, + borderColor: "white", + margin: 10, + backgroundColor: "white", + }} + /> + JR四国非公式アプリ + + ) : ( + <> + )} + + JR四国非公式アプリを更新して好きなアイコンに変更してみよう！ + + + + + + + + 推しアイコンをシェア + + + + + + + ); +}; +const Handler = () => { + useEffect(() => { + const backAction = () => { + SheetManager.hide("JRSTraInfo"); + return true; + }; + const backHandler = BackHandler.addEventListener( + "hardwareBackPress", + backAction + ); + return () => backHandler.remove(); + }, []); + return <>; +}; diff --git a/components/ActionSheetComponents/sheets.ts b/components/ActionSheetComponents/sheets.ts index eaa7427..2f4ba52 100644 --- a/components/ActionSheetComponents/sheets.ts +++ b/components/ActionSheetComponents/sheets.ts @@ -3,10 +3,12 @@ import { EachTrainInfo } from "./EachTrainInfo"; import { JRSTraInfo } from "./JRSTraInfo"; import { StationDeteilView } from "./StationDeteilView"; import { TrainMenuLineSelector } from "./TrainMenuLineSelector"; +import { TrainIconUpdate } from "./TrainIconUpdate"; registerSheet("EachTrainInfo", EachTrainInfo); registerSheet("JRSTraInfo", JRSTraInfo); registerSheet("StationDetailView", StationDeteilView); registerSheet("TrainMenuLineSelector", TrainMenuLineSelector); +registerSheet("TrainIconUpdate", TrainIconUpdate); export {}; diff --git a/components/Settings/LauncherIconSettings.js b/components/Settings/LauncherIconSettings.js index cc2048a..96434c0 100644 --- a/components/Settings/LauncherIconSettings.js +++ b/components/Settings/LauncherIconSettings.js @@ -1,23 +1,23 @@ -import React, { useEffect, useState } from "react"; -import { View, Text, TouchableOpacity, ScrollView, Image } from "react-native"; +import React, { useState } from "react"; +import { + View, + Text, + TouchableOpacity, + ScrollView, + Image, + ToastAndroid, + Platform, +} from "react-native"; import { useNavigation } from "@react-navigation/native"; -import { CheckBox } from "react-native-elements"; import { AS } from "../../storageControl"; import icons from "../../assets/icons/icons"; -import app from "../../app.json"; -import { ListItem } from "native-base"; -import { - setAlternateAppIcon, - resetAppIcon, - getAppIconName, - supportsAlternateIcons, -} from "expo-alternate-app-icons"; +import { setAlternateAppIcon, getAppIconName } from "expo-alternate-app-icons"; import { widthPercentageToDP } from "react-native-responsive-screen"; export const LauncherIconSettings = ({ navigate }) => { const { goBack } = useNavigation(); - const [iconList, ] = useState(icons()); - const [currentIcon, ] = useState(getAppIconName()); + const [iconList] = useState(icons()); + const [currentIcon] = useState(getAppIconName()); return ( @@ -81,9 +81,7 @@ export const LauncherIconSettings = ({ navigate }) => { }} > id == currentIcon)[0].icon - } + source={iconList.filter(({ id }) => id == currentIcon)[0].icon} style={{ width: 50, height: 50, @@ -128,7 +126,13 @@ export const LauncherIconSettings = ({ navigate }) => { onPress={() => { setAlternateAppIcon(id) .then((res) => { - alert(res); + AS.setItem("isSetIcon", "true"); + if (Platform.OS === "android") { + ToastAndroid.show( + "アイコンを変更しました。アプリを再起動します。", + ToastAndroid.SHORT + ); + } }) .catch((err) => { alert(err); diff --git a/index.js b/index.js index 3cbdf21..00631d6 100644 --- a/index.js +++ b/index.js @@ -1,6 +1,7 @@ import 'babel-polyfill'; import { registerRootComponent } from "expo"; import { registerWidgetTaskHandler } from "react-native-android-widget"; +import { Platform } from "react-native"; import App from "./App"; import { widgetTaskHandler } from "./components/AndroidWidget/widget-task-handler";