diff --git a/MenuPage.js b/MenuPage.js
index e9f16b4..a815a2e 100644
--- a/MenuPage.js
+++ b/MenuPage.js
@@ -1,4 +1,4 @@
-import React, { useEffect, useRef,useState } from "react";
+import React, { useEffect, useRef, useState } from "react";
import { createStackNavigator } from "@react-navigation/stack";
import { useWindowDimensions, Platform } from "react-native";
import Constants from "expo-constants";
@@ -50,8 +50,9 @@ export function MenuPage() {
}, []);
const scrollRef = useRef(null);
- const [mapHeight,setMapHeight] = useState(0);
- useEffect(()=>{
+ const [mapMode, setMapMode] = useState(false);
+ const [mapHeight, setMapHeight] = useState(0);
+ useEffect(() => {
const MapHeight =
height -
tabBarHeight +
@@ -60,12 +61,21 @@ export function MenuPage() {
((((width / 100) * 80) / 20) * 9 + 10 + 30);
setMapHeight(MapHeight);
}, [height, tabBarHeight, width]);
+ const [MapFullHeight, setMapFullHeight] = useState(0);
+ useEffect(() => {
+ const MapFullHeight =
+ height -
+ tabBarHeight +
+ (Platform.OS == "android" ? Constants.statusBarHeight : 0);
+ setMapFullHeight(MapFullHeight);
+ }, [height, tabBarHeight, width]);
useEffect(() => {
const unsubscribe = addListener("tabPress", (e) => {
scrollRef.current.scrollTo({
y: mapHeight - 80,
animated: true,
});
+ setMapMode(false);
AS.getItem("favoriteStation")
.then((d) => {
const returnData = JSON.parse(d);
@@ -87,7 +97,15 @@ export function MenuPage() {
gestureEnabled: true,
headerTransparent: true,
}}
- children={() => }
+ children={() => (
+
+ )}
/>
{
+ const tabBarHeight = useBottomTabBarHeight();
const returnToDefaultMode = ()=>{
LayoutAnimation.configureNext({
duration: 300,
@@ -26,7 +29,7 @@ export const CarouselTypeChanger = ({
setMapMode(false);
}
return (
-
+
{
+ if (!position) return;
+ returnToDefaultMode();
+ setStationListMode("position");
+ }}
onPress={() => {
if (!position) return;
returnToDefaultMode();
@@ -76,7 +85,7 @@ export const CarouselTypeChanger = ({
onPressIn={() => returnToDefaultMode()}
>
{
+ returnToDefaultMode();
+ // お気に入りリスト更新
+ setStationListMode("favorite");
+ setSelectedCurrentStation(0);
+ }}
onPress={() => {
returnToDefaultMode();
// お気に入りリスト更新
diff --git a/menu.js b/menu.js
index 50a1e3e..b02d605 100644
--- a/menu.js
+++ b/menu.js
@@ -33,32 +33,20 @@ configureReanimatedLogger({
level: ReanimatedLogLevel.error, // Set the log level to error
strict: true, // Reanimated runs in strict mode by default
});
-export default function Menu({ scrollRef, mapHeight }) {
+export default function Menu({ scrollRef, mapHeight, MapFullHeight, mapMode, setMapMode }) {
const { navigate, addListener, isFocused } = useNavigation();
const { favoriteStation } = useFavoriteStation();
const { originalStationList } = useStationList();
const { height, width } = useWindowDimensions();
const { bottom, left, right, top } = useSafeAreaInsets();
- const [mapMode, setMapMode] = useState(false);
const tabBarHeight = useBottomTabBarHeight();
const [stationListMode, setStationListMode] = useState(
/*<"position"|"favorite">*/ "position"
);
const mapsRef = useRef(null);
- const MapHeight =
- height -
- tabBarHeight +
- (Platform.OS == "android" ? Constants.statusBarHeight : 0) -
- 100 -
- ((((width / 100) * 80) / 20) * 9 + 10 + 30);
- const MapFullHeight =
- height -
- tabBarHeight +
- (Platform.OS == "android" ? Constants.statusBarHeight : 0) -
- 100;
const returnToTop = (bool = true) => {
scrollRef.current.scrollTo({
- y: mapHeight > 80 ?mapHeight - 80 :0,
+ y: mapHeight > 80 ? mapHeight - 80 : 0,
animated: bool,
});
};
@@ -69,11 +57,12 @@ export default function Menu({ scrollRef, mapHeight }) {
});
};
useEffect(() => {
- setTimeout(()=>{
+ setTimeout(() => {
returnToTop(false);
}, 10);
}, [mapHeight]);
- const returnToDefaultMode = () => {
+ const [scrollStartPosition, setScrollStartPosition] = useState(0);
+ const onScrollBeginDrag = (e) => {
LayoutAnimation.configureNext({
duration: 300,
create: {
@@ -85,6 +74,7 @@ export default function Menu({ scrollRef, mapHeight }) {
property: LayoutAnimation.Properties.opacity,
},
});
+ setScrollStartPosition(e.nativeEvent.contentOffset.y);
setMapMode(false);
};
//現在地基準の駅名標リストアップ機能
@@ -189,12 +179,22 @@ export default function Menu({ scrollRef, mapHeight }) {
snapToStart={false}
snapToEnd={false}
decelerationRate={"normal"}
- snapToOffsets={[MapHeight - 80]}
- onScrollBeginDrag={() => returnToDefaultMode()}
+ snapToOffsets={[mapHeight - 80]}
+ onScrollBeginDrag={onScrollBeginDrag}
+ onScrollEndDrag={(e) => {
+ console.log(e.nativeEvent.velocity);
+ if (e.nativeEvent.contentOffset.y < mapHeight - 80) {
+ if (scrollStartPosition > e.nativeEvent.contentOffset.y) {
+ goToMap();
+ } else {
+ returnToTop();
+ }
+ }
+ }}
>
))}
-
+ {!mapMode && (
+
+ )}
+
{listUpStation.length != 0 && originalStationList.length != 0 && (
<>
+ {mapMode && (
+
+ )}
);
-}
\ No newline at end of file
+}