jrshikoku/components/ActionSheetComponents/EachTrainInfo.js
2023-06-27 12:58:00 +09:00

97 lines
2.8 KiB
JavaScript

import React, { useEffect, useState } from "react";
import {
View,
LayoutAnimation,
ScrollView,
Linking,
Text,
TouchableOpacity,
} from "react-native";
import { Ionicons, MaterialCommunityIcons } from "@expo/vector-icons";
import ActionSheet from "react-native-actions-sheet";
import LottieView from "lottie-react-native";
import trainList from "../../assets/originData/trainList";
export const EachTrainInfo = (props) => {
const { setRef, data } = props;
console.log(data);
const [trainData, setTrainData] = useState([]);
useEffect(() => {
if (!data.trainNum) return;
const TD = trainList[data.trainNum];
if (!TD) {
setTrainData([]);
return;
}
console.log(TD);
setTrainData(TD.split("#"));
}, [data]);
return (
<ActionSheet ref={setRef} gestureEnabled CustomHeaderComponent={<></>}>
<View
style={{
backgroundColor: "#0099CC",
borderRadius: 5,
borderColor: "dark",
borderWidth: 1,
}}
>
<View style={{ height: 26, width: "100%" }}>
<View
style={{
height: 6,
width: 45,
borderRadius: 100,
backgroundColor: "#f0f0f0",
marginVertical: 10,
alignSelf: "center",
}}
/>
</View>
<View
style={{ padding: 10, flexDirection: "row", alignItems: "center" }}
>
<Text style={{ fontSize: 20, fontWeight: "bold", color: "white" }}>
{data.limited ? data.limited : ""}
</Text>
<View style={{ flex: 1 }} />
<Text style={{ fontSize: 20, fontWeight: "bold", color: "white" }}>
{data.trainNum}
</Text>
<Ionicons
name="reload"
color="white"
size={30}
style={{ margin: 5 }}
onPress={() => {
LayoutAnimation.easeInEaseOut(); //setLoadingDelayData(true);
}}
/>
</View>
<ScrollView>
<View
style={{
padding: 10,
backgroundColor: "white",
borderBottomLeftRadius: 5,
borderBottomRightRadius: 5,
}}
>
<View style={{ alignItems: "center" }}>
{/* <LottieView
autoPlay
loop
style={{ width: 150, height: 150, backgroundColor: "#fff" }}
source={require("../../assets/51690-loading-diamonds.json")}
/>
<Text>ほげほげふがふが</Text> */}
{trainData.map((i, index) => {
return <Text>{i}</Text>;
})}
</View>
</View>
</ScrollView>
</View>
</ActionSheet>
);
};