diff --git a/menu.js b/menu.js index 644953e..6f712b2 100644 --- a/menu.js +++ b/menu.js @@ -37,6 +37,7 @@ import lineColorList from "./assets/originData/lineColorList"; import { AS } from "./storageControl"; import { SimpleDot } from "./components/Menu/SimpleDot"; import { useAllTrainDiagram } from "./stateBox/useAllTrainDiagram"; +import MapView from "react-native-maps"; export default function Menu({ getCurrentTrain }) { const { navigate } = useNavigation(); @@ -44,13 +45,28 @@ export default function Menu({ getCurrentTrain }) { const { originalStationList } = useStationList(); const { height, width } = useWindowDimensions(); const scrollRef = useRef(null); + const [mapsOpacity, setMapsOpacity] = useState(1); + const mapsSizeOffset = + (height / 100) * 60 - (((width / 100) * 80) / 20) * 9 + 60 - (Platform.OS == "ios" ? Constants.statusBarHeight : 0); useEffect(() => { - if (scrollRef.current) { - scrollRef.current.scrollTo({ - y: (height / 100) * 60 - (((width / 100) * 80) / 20) * 9 + 30, - animated: false, - }); - } + setTimeout(() => { + if (scrollRef.current) { + scrollRef.current.scrollTo({ + y: mapsSizeOffset, + animated: false, + }); + } + }, 10); + }, []); + useEffect(() => { + setTimeout(() => { + if (scrollRef.current) { + scrollRef.current.scrollTo({ + y: mapsSizeOffset, + animated: false, + }); + } + }, 10); }, []); //位置情報 @@ -186,21 +202,49 @@ export default function Menu({ getCurrentTrain }) { { + console.log(Object.keys(scrollRef.current)); + const scrollY = d.nativeEvent.contentOffset.y; + if (scrollY < mapsSizeOffset) { + setMapsOpacity(scrollY / mapsSizeOffset); + } + }} + snapToOffsets={[mapsSizeOffset]} > + + { + alert("地図をタップ"); + }} + > + - + <> {originalStationList.length != 0 && allStationData.length != 0 && (