diff --git a/components/AllTrainDiagramView.js b/components/AllTrainDiagramView.js index 14f8867..7ebe8da 100644 --- a/components/AllTrainDiagramView.js +++ b/components/AllTrainDiagramView.js @@ -17,12 +17,7 @@ import { SheetManager } from "react-native-actions-sheet"; import { useNavigation } from "@react-navigation/native"; export default function AllTrainDiagramView() { const { navigate } = useNavigation(); - const { allTrainDiagram } = useAllTrainDiagram(); - const [keyList, setKeyList] = useState(); // 第二要素 - useEffect( - () => allTrainDiagram && setKeyList(Object.keys(allTrainDiagram)), - [] - ); + const { keyList } = useAllTrainDiagram(); const [input, setInput] = useState(""); // 文字入力 const [keyBoardVisible, setKeyBoardVisible] = useState(false); @@ -48,13 +43,10 @@ export default function AllTrainDiagramView() { parseInt(d.replace("M", "").replace("D", "")) - train.trainNumDistance; TrainNumber = timeInfo + "号"; } + const type = getTrainType(train.type).data; + const limited = `${type}:${train.trainName}${TrainNumber}`; const payload = { - data: { - trainNum: d, - limited: `${getTrainType(train.type).data}:${ - train.trainName - }${TrainNumber}`, - }, + data: { trainNum: d, limited }, navigate, from: "AllTrainIDList", }; @@ -67,11 +59,9 @@ export default function AllTrainDiagramView() { d.includes(input))} - renderItem={({ item }) => ( - - )} + renderItem={({ item }) => } keyExtractor={(item) => item} - initialNumToRender={100} + //initialNumToRender={100} /> { - setKeyBoardVisible(true); - }} + onFocus={() => setKeyBoardVisible(true)} onEndEditing={() => {}} - onChange={(ret) => { - setInput(ret.nativeEvent.text); - }} + onChange={(ret) => setInput(ret.nativeEvent.text)} value={input} style={{ flex: 1 }} /> diff --git a/components/trainMenu.js b/components/trainMenu.js index 2f96e2a..0dda3e4 100644 --- a/components/trainMenu.js +++ b/components/trainMenu.js @@ -1,4 +1,4 @@ -import React, { useRef, useState, useEffect } from "react"; +import React, { useRef, useState, useEffect, useLayoutEffect } from "react"; import { View, Text, TouchableOpacity, Linking } from "react-native"; import MapView, { Marker } from "react-native-maps"; import { MaterialCommunityIcons, Ionicons } from "@expo/vector-icons"; @@ -23,8 +23,8 @@ export default function TrainMenu({ style }) { } = useTrainMenu(); useEffect(() => { const stationPinData = []; - Object.keys(stationData).map((d, indexBase) => { - stationData[d].map((D, index) => { + Object.keys(stationData).forEach((d, indexBase) => { + stationData[d].forEach((D, index) => { if (!D.StationMap) return null; if (selectedLine && selectedLine != d) return; const latlng = D.StationMap.replace( @@ -43,7 +43,7 @@ export default function TrainMenu({ style }) { }); setStationPin(stationPinData); }, [stationData, selectedLine]); - useEffect(() => { + useLayoutEffect(() => { mapRef.current.fitToCoordinates( stationPin.map(({ latlng }) => ({ latitude: parseFloat(latlng[0]), diff --git a/stateBox/useAllTrainDiagram.js b/stateBox/useAllTrainDiagram.js index a792222..f6c643c 100644 --- a/stateBox/useAllTrainDiagram.js +++ b/stateBox/useAllTrainDiagram.js @@ -6,12 +6,15 @@ const initialState = { const AllTrainDiagramContext = createContext(initialState); -export const useAllTrainDiagram = () => { - return useContext(AllTrainDiagramContext); -}; +export const useAllTrainDiagram = () => useContext(AllTrainDiagramContext); export const AllTrainDiagramProvider = ({ children }) => { const [allTrainDiagram, setAllTrainDiagram] = useState(); + const [keyList, setKeyList] = useState(); // 第二要素 + useEffect( + () => allTrainDiagram && setKeyList(Object.keys(allTrainDiagram)), + [allTrainDiagram] + ); const customData = {}; useEffect(() => { fetch( @@ -55,7 +58,7 @@ export const AllTrainDiagramProvider = ({ children }) => { return ( {children}