現在地ベースのボタンとか追加
This commit is contained in:
harukin-expo-dev-env
parent
190be0fa67
commit
cf025d3add
@ -1,7 +1,7 @@
|
||||
import { TouchableOpacity, Text } from "react-native";
|
||||
import { MaterialCommunityIcons } from "@expo/vector-icons";
|
||||
export const UsefulBox = (props) => {
|
||||
const { icon, backgroundColor, flex, onPressButton, children } = props;
|
||||
const { icon, backgroundColor, flex, onPressButton, children, disable = false } = props;
|
||||
return (
|
||||
<TouchableOpacity
|
||||
style={{
|
||||
@ -11,6 +11,7 @@ export const UsefulBox = (props) => {
|
||||
alignItems: "center",
|
||||
margin: 2,
|
||||
}}
|
||||
disabled={disable}
|
||||
onPress={onPressButton}
|
||||
>
|
||||
<MaterialCommunityIcons name={icon} color="white" size={50} />
|
||||
|
||||
@ -10,8 +10,7 @@ import { Footer } from "./LED_Vision_Component/Footer";
|
||||
import { Header } from "./LED_Vision_Component/Header";
|
||||
import { Description } from "./LED_inside_Component/Description";
|
||||
import { EachData } from "./EachData";
|
||||
|
||||
|
||||
import { useAllTrainDiagram } from "@/stateBox/useAllTrainDiagram";
|
||||
|
||||
/**
|
||||
*
|
||||
@ -43,13 +42,8 @@ import { EachData } from "./EachData";
|
||||
* 9062D 四国まんなか千年ものがたり(臨時？)
|
||||
*/
|
||||
export default function LED_vision(props) {
|
||||
const {
|
||||
station,
|
||||
trainDiagram,
|
||||
getCurrentTrain,
|
||||
navigate,
|
||||
openStationACFromEachTrainInfo,
|
||||
} = props;
|
||||
const { station, getCurrentTrain, navigate, openStationACFromEachTrainInfo } =
|
||||
props;
|
||||
const { currentTrain } = useCurrentTrain();
|
||||
const [stationDiagram, setStationDiagram] = useState({}); //当該駅の全時刻表
|
||||
const [finalSwitch, setFinalSwitch] = useState(false);
|
||||
@ -57,6 +51,7 @@ export default function LED_vision(props) {
|
||||
const [trainDescriptionSwitch, setTrainDescriptionSwitch] = useState(false);
|
||||
const [isInfoArea, setIsInfoArea] = useState(false);
|
||||
const { areaInfo, areaStationID } = useAreaInfo();
|
||||
const { allTrainDiagram: trainDiagram } = useAllTrainDiagram();
|
||||
|
||||
useEffect(() => {
|
||||
AS.getItem("LEDSettings/trainIDSwitch").then((data) => {
|
||||
@ -107,7 +102,8 @@ export default function LED_vision(props) {
|
||||
}, [trainTimeAndNumber, currentTrain, finalSwitch]);
|
||||
|
||||
const getTime = (stationDiagram, station) => {
|
||||
const returnData = Object.keys(stationDiagram).map((trainNum) => {
|
||||
const returnData = Object.keys(stationDiagram)
|
||||
.map((trainNum) => {
|
||||
let trainData = {};
|
||||
stationDiagram[trainNum].split("#").forEach((data) => {
|
||||
if (data.match("着")) {
|
||||
@ -116,7 +112,7 @@ export default function LED_vision(props) {
|
||||
if (data.split(",")[0] === station.Station_JP) {
|
||||
if (data.match(",発,")) {
|
||||
trainData.time = data.split(",発,")[1];
|
||||
} else if(data.match(",着,")){
|
||||
} else if (data.match(",着,")) {
|
||||
trainData.time = data.split(",着,")[1];
|
||||
trainData.lastStation = "当駅止";
|
||||
}
|
||||
@ -127,7 +123,8 @@ export default function LED_vision(props) {
|
||||
time: trainData.time,
|
||||
lastStation: trainData.lastStation,
|
||||
};
|
||||
}).filter((d) => d.time);
|
||||
})
|
||||
.filter((d) => d.time);
|
||||
return returnData.sort((a, b) => {
|
||||
switch (true) {
|
||||
case parseInt(a.time.split(":")[0]) < parseInt(b.time.split(":")[0]):
|
||||
|
||||
147
menu.js
147
menu.js
@ -15,12 +15,10 @@ import * as Location from "expo-location";
|
||||
import {
|
||||
configureReanimatedLogger,
|
||||
ReanimatedLogLevel,
|
||||
} from 'react-native-reanimated';
|
||||
} from "react-native-reanimated";
|
||||
import StatusbarDetect from "./StatusbarDetect";
|
||||
import { widthPercentageToDP as wp } from "react-native-responsive-screen";
|
||||
import { Ionicons } from "@expo/vector-icons";
|
||||
import LottieView from "lottie-react-native";
|
||||
import { parseAllTrainDiagram } from "./lib/parseAllTrainDiagram";
|
||||
|
||||
import LED_vision from "./components/発車時刻表/LED_vidion";
|
||||
import Sign from "./components/駅名表/Sign";
|
||||
@ -52,7 +50,7 @@ export default function Menu({ getCurrentTrain }) {
|
||||
const { originalStationList } = useStationList();
|
||||
const { height, width } = useWindowDimensions();
|
||||
const scrollRef = useRef(null);
|
||||
const [mapsOpacity, setMapsOpacity] = useState(1);
|
||||
const [mapsOpacity, setMapsOpacity] = useState(false);
|
||||
const mapsRef = useRef(null);
|
||||
const mapsSizeOffset =
|
||||
(height / 100) * 60 -
|
||||
@ -81,13 +79,17 @@ export default function Menu({ getCurrentTrain }) {
|
||||
);
|
||||
});
|
||||
}, []);
|
||||
|
||||
const [position, setPosition] = useState(undefined);
|
||||
const getCurrentPosition = () => {
|
||||
if (!locationStatus) return () => {};
|
||||
Location.getCurrentPositionAsync({}).then((location) =>
|
||||
makeCurrentStation(location)
|
||||
);
|
||||
Location.getCurrentPositionAsync({}).then((location) => {
|
||||
setPosition(location);
|
||||
});
|
||||
};
|
||||
useEffect(() => {
|
||||
if (!position) return () => {};
|
||||
makeCurrentStation(position);
|
||||
}, [position]);
|
||||
const makeCurrentStation = (location) => {
|
||||
if (!originalStationList) return () => {};
|
||||
const findStationEachLine = (selectLine) => {
|
||||
@ -157,8 +159,6 @@ export default function Menu({ getCurrentTrain }) {
|
||||
}, [selectedCurrentStation]);
|
||||
|
||||
//全列車ダイヤリストを作成するuseEffect
|
||||
const { allTrainDiagram: trainDiagram } = useAllTrainDiagram();
|
||||
|
||||
const oPSign = () => {
|
||||
const payload = {
|
||||
currentStation:
|
||||
@ -177,13 +177,12 @@ export default function Menu({ getCurrentTrain }) {
|
||||
|
||||
useEffect(() => {
|
||||
console.log(selectedCurrentStation);
|
||||
if(allStationData.length == 0) return;
|
||||
const currentStationData =
|
||||
if (allStationData.length == 0) return;
|
||||
if (allStationData[selectedCurrentStation] == undefined) return;
|
||||
const { lat, lng } =
|
||||
originalStationList &&
|
||||
allStationData[selectedCurrentStation] &&
|
||||
allStationData[selectedCurrentStation][0];
|
||||
console.log(currentStationData);
|
||||
const {lat, lng} = currentStationData;
|
||||
const mapRegion = {
|
||||
latitude: lat,
|
||||
longitude: lng,
|
||||
@ -191,8 +190,7 @@ export default function Menu({ getCurrentTrain }) {
|
||||
longitudeDelta: 0.05,
|
||||
};
|
||||
mapsRef.current.animateToRegion(mapRegion, 1000);
|
||||
|
||||
}, [selectedCurrentStation, currentStation, allStationData,mapsRef]);
|
||||
}, [selectedCurrentStation, currentStation, allStationData, mapsRef]);
|
||||
|
||||
useEffect(() => {
|
||||
AS.getItem("CarouselSettings/activeDotSettings").then((data) => {
|
||||
@ -228,10 +226,8 @@ export default function Menu({ getCurrentTrain }) {
|
||||
decelerationRate={"normal"}
|
||||
onScroll={(d) => {
|
||||
console.log(Object.keys(scrollRef.current));
|
||||
const scrollY = d.nativeEvent.contentOffset.y;
|
||||
if (scrollY < mapsSizeOffset) {
|
||||
setMapsOpacity(scrollY / mapsSizeOffset);
|
||||
}
|
||||
const scrollY = d.nativeEvent.contentOffset.y + 100;
|
||||
setMapsOpacity(scrollY < mapsSizeOffset);
|
||||
}}
|
||||
snapToOffsets={[mapsSizeOffset]}
|
||||
>
|
||||
@ -244,7 +240,7 @@ export default function Menu({ getCurrentTrain }) {
|
||||
position: "absolute",
|
||||
height:
|
||||
(height / 100) * 60 + (((width / 100) * 80) / 20) * 9 + 60,
|
||||
opacity: 1 - mapsOpacity,
|
||||
opacity: mapsOpacity ? 1 : 0,
|
||||
}}
|
||||
showsUserLocation={true}
|
||||
loadingEnabled={true}
|
||||
@ -263,8 +259,103 @@ export default function Menu({ getCurrentTrain }) {
|
||||
}}
|
||||
></MapView>
|
||||
</View>
|
||||
<TopMenuButton />
|
||||
<View style={{ height: mapsSizeOffset }} />
|
||||
<TopMenuButton show={mapsOpacity} />
|
||||
<View style={{ height: mapsSizeOffset, position: "relative" }}>
|
||||
<View
|
||||
style={{
|
||||
width: "100%",
|
||||
position: "absolute",
|
||||
bottom: 0,
|
||||
flexDirection: "row",
|
||||
display: mapsOpacity ? "flex" : "none",
|
||||
}}
|
||||
>
|
||||
<TouchableOpacity
|
||||
style={{
|
||||
flex: 1,
|
||||
backgroundColor: "#0099CC",
|
||||
padding: 5,
|
||||
alignItems: "center",
|
||||
flexDirection: "row",
|
||||
marginHorizontal: 5,
|
||||
borderRadius: 30,
|
||||
}}
|
||||
disabled={!locationStatus}
|
||||
onPress={()=>{
|
||||
if(!position) return;
|
||||
const { latitude, longitude } = position.coords;
|
||||
mapsRef.current.animateToRegion(
|
||||
{
|
||||
latitude,
|
||||
longitude,
|
||||
latitudeDelta: 0.05,
|
||||
longitudeDelta: 0.05,
|
||||
},
|
||||
1000
|
||||
);
|
||||
}}
|
||||
>
|
||||
<Ionicons
|
||||
name="locate-outline"
|
||||
size={14}
|
||||
color="white"
|
||||
style={{ margin: 5 }}
|
||||
/>
|
||||
<Text
|
||||
style={{
|
||||
color: "white",
|
||||
fontSize: 14,
|
||||
fontWeight: "bold",
|
||||
flex: 1,
|
||||
textAlign: "center",
|
||||
}}
|
||||
>
|
||||
現在地基準
|
||||
</Text>
|
||||
</TouchableOpacity>
|
||||
<TouchableOpacity
|
||||
style={{
|
||||
flex: 1,
|
||||
backgroundColor: "#0099CC",
|
||||
padding: 5,
|
||||
alignItems: "center",
|
||||
flexDirection: "row",
|
||||
|
||||
marginHorizontal: 5,
|
||||
borderRadius: 30,
|
||||
}}
|
||||
onPress={() => {
|
||||
// お気に入りリスト更新
|
||||
}}
|
||||
>
|
||||
<Ionicons
|
||||
name="star"
|
||||
size={14}
|
||||
color="white"
|
||||
style={{ margin: 5 }}
|
||||
/>
|
||||
<Text
|
||||
style={{
|
||||
color: "white",
|
||||
fontSize: 14,
|
||||
fontWeight: "bold",
|
||||
flex: 1,
|
||||
textAlign: "center",
|
||||
}}
|
||||
>
|
||||
お気に入りリスト
|
||||
</Text>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
<View
|
||||
style={{
|
||||
height: 0,
|
||||
backgroundColor: "white",
|
||||
position: "absolute",
|
||||
top: mapsSizeOffset,
|
||||
}}
|
||||
/>
|
||||
</View>
|
||||
<></>
|
||||
{originalStationList.length != 0 && allStationData.length != 0 && (
|
||||
<View style={{ flex: 1, paddingTop: 10 }}>
|
||||
@ -346,10 +437,7 @@ export default function Menu({ getCurrentTrain }) {
|
||||
originalStationList.length != 0 &&
|
||||
allStationData[selectedCurrentStation] && (
|
||||
<LED_vision
|
||||
station={
|
||||
originalStationList && allStationData[selectedCurrentStation]
|
||||
}
|
||||
trainDiagram={trainDiagram}
|
||||
station={allStationData[selectedCurrentStation]}
|
||||
getCurrentTrain={getCurrentTrain}
|
||||
navigate={navigate}
|
||||
openStationACFromEachTrainInfo={() => {}}
|
||||
@ -362,7 +450,7 @@ export default function Menu({ getCurrentTrain }) {
|
||||
);
|
||||
}
|
||||
|
||||
const TopMenuButton = () => {
|
||||
const TopMenuButton = ({ show }) => {
|
||||
const buttonList = [
|
||||
{
|
||||
backgroundColor: "#F89038",
|
||||
@ -388,12 +476,13 @@ const TopMenuButton = () => {
|
||||
},
|
||||
];
|
||||
return (
|
||||
<View style={{ flexDirection: "row" }}>
|
||||
<View style={{ flexDirection: "row", opacity: !show ? 1 : 0 }}>
|
||||
{buttonList.map((d, index) => (
|
||||
<UsefulBox
|
||||
backgroundColor={d.backgroundColor}
|
||||
icon={d.icon}
|
||||
flex={1}
|
||||
disable={show}
|
||||
onPressButton={d.onPress}
|
||||
key={index + d.icon}
|
||||
>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user