jrshikoku/components/ActionSheetComponents/EachTrainInfo/DynamicHeader.js

import * as React from "react";
import { Text, View, StyleSheet, Animated, ScrollView } from "react-native";
import { TrainDataView } from "./TrainDataView";

const Max_Header_Height = 200;
const Min_Header_Height = 80;
const Scroll_Distance = Max_Header_Height - Min_Header_Height;
export const DynamicHeader = ({
  animHeaderValue,
  currentTrainData,
  currentPosition,
  nearTrainIDList,
  openTrainInfo,
}) => {
  const animatedHeaderHeight = animHeaderValue.interpolate({
    inputRange: [0, Scroll_Distance],
    outputRange: [Max_Header_Height, 0],
    extrapolate: "clamp",
  });
  const animatedHeaderHeight2 = animHeaderValue.interpolate({
    inputRange: [0, Scroll_Distance],
    outputRange: [0, Min_Header_Height],
    extrapolate: "clamp",
  });
  const animateHeaderBackgroundColor = animHeaderValue.interpolate({
    inputRange: [0, Max_Header_Height - Min_Header_Height],
    outputRange: ["blue", "red"],
    extrapolate: "clamp",
  });
  return (
    <>
      <Animated.View
        style={[
          styles.header,
          {
            height: animatedHeaderHeight,
            // backgroundColor: animateHeaderBackgroundColor,
          },
        ]}
      >
        <ScrollView
          //onTouchStart={() => setActionSheetHorizonalScroll(true)}
          //onScrollEndDrag={() => setActionSheetHorizonalScroll(false)}
          //onScrollBeginDrag={() => console.log("onScrollBeginDrag")}
          style={{
            flexDirection: "row",
            //width: widthPercentageToDP("200%"),
            // minHeight: 200,
            //height: heightPercentageToDP("20%"),
          }}
          horizontal
          pagingEnabled
        >
          <TrainDataView
            currentTrainData={currentTrainData}
            currentPosition={currentPosition}
            nearTrainIDList={nearTrainIDList}
            openTrainInfo={openTrainInfo}
          />
          {/* <View
              style={{
                flexDirection: "column",
                height: heightPercentageToDP("20%"),
                flex: 1,
                width: widthPercentageToDP("100%"),
              }}
            >
              <View style={{ flex: 1, flexDirection: "row" }}>
                <View
                  style={{
                    flex: 1,
                    backgroundColor: "white",
                    borderRadius: 10,
                    padding: 10,
                    margin: 10,
                  }}
                >
                  <Text style={{ fontSize: 15, color: "#0099CC" }}>行先</Text>
                  <View style={{ flex: 1 }} />
                  <Text
                    style={{
                      fontSize: 20,
                      color: "#0099CC",
                      textAlign: "right",
                    }}
                  >
                    岡山
                  </Text>
                </View>

                <View
                  style={{
                    flex: 3,
                    backgroundColor: "white",
                    borderRadius: 10,
                    padding: 10,
                    margin: 10,
                  }}
                >
                  <Text style={{ fontSize: 15, color: "#0099CC" }}>
                    車両案内
                  </Text>
                  <View style={{ flex: 1 }} />
                  <Text
                    style={{
                      fontSize: 20,
                      color: "#0099CC",
                      textAlign: "right",
                    }}
                  >
                    宇多津でうずしお号と連結
                  </Text>
                </View>
              </View>
              <View style={{ flex: 1, flexDirection: "row" }}>
                <View
                  style={{
                    flex: 1,
                    backgroundColor: "white",
                    borderRadius: 10,
                    padding: 10,
                    margin: 10,
                  }}
                >
                  <Text style={{ fontSize: 15, color: "#0099CC" }}>
                    編成(使用車両：2700系)
                  </Text>
                  <View style={{ flex: 1 }} />
                  <Text
                    style={{
                      fontSize: 20,
                      color: "#0099CC",
                      textAlign: "left",
                    }}
                  >
                    {"[<自][自>][アン自|指>][アン指|G>]"}
                  </Text>
                </View>
              </View>
            </View> */}
        </ScrollView>
      </Animated.View>
      <Animated.View
        style={[
          styles.header,
          {
            height: animatedHeaderHeight2,
            //backgroundColor: animateHeaderBackgroundColor,
            margin: 0,
          },
        ]}
      >
        <ScrollView
          //onTouchStart={() => setActionSheetHorizonalScroll(true)}
          //onScrollEndDrag={() => setActionSheetHorizonalScroll(false)}
          //onScrollBeginDrag={() => console.log("onScrollBeginDrag")}
          style={{
            flexDirection: "row",
            flex: 1,
            //width: widthPercentageToDP("200%"),
            // minHeight: 200,
            //height: heightPercentageToDP("20%"),
          }}
          horizontal
          pagingEnabled
        >
          <TrainDataView
            mode={2}
            currentTrainData={currentTrainData}
            currentPosition={currentPosition}
            nearTrainIDList={nearTrainIDList}
            openTrainInfo={openTrainInfo}
          />
          {/* <View
              style={{
                flexDirection: "column",
                height: heightPercentageToDP("20%"),
                flex: 1,
                width: widthPercentageToDP("100%"),
              }}
            >
              <View style={{ flex: 1, flexDirection: "row" }}>
                <View
                  style={{
                    flex: 1,
                    backgroundColor: "white",
                    borderRadius: 10,
                    padding: 10,
                    margin: 10,
                  }}
                >
                  <Text style={{ fontSize: 15, color: "#0099CC" }}>行先</Text>
                  <View style={{ flex: 1 }} />
                  <Text
                    style={{
                      fontSize: 20,
                      color: "#0099CC",
                      textAlign: "right",
                    }}
                  >
                    岡山
                  </Text>
                </View>

                <View
                  style={{
                    flex: 3,
                    backgroundColor: "white",
                    borderRadius: 10,
                    padding: 10,
                    margin: 10,
                  }}
                >
                  <Text style={{ fontSize: 15, color: "#0099CC" }}>
                    車両案内
                  </Text>
                  <View style={{ flex: 1 }} />
                  <Text
                    style={{
                      fontSize: 20,
                      color: "#0099CC",
                      textAlign: "right",
                    }}
                  >
                    宇多津でうずしお号と連結
                  </Text>
                </View>
              </View>
              <View style={{ flex: 1, flexDirection: "row" }}>
                <View
                  style={{
                    flex: 1,
                    backgroundColor: "white",
                    borderRadius: 10,
                    padding: 10,
                    margin: 10,
                  }}
                >
                  <Text style={{ fontSize: 15, color: "#0099CC" }}>
                    編成(使用車両：2700系)
                  </Text>
                  <View style={{ flex: 1 }} />
                  <Text
                    style={{
                      fontSize: 20,
                      color: "#0099CC",
                      textAlign: "left",
                    }}
                  >
                    {"[<自][自>][アン自|指>][アン指|G>]"}
                  </Text>
                </View>
              </View>
            </View> */}
        </ScrollView>
      </Animated.View>
    </>
  );
};
const styles = StyleSheet.create({
  header: {
    justifyContent: "center",
    alignItems: "center",
    left: 0,
    right: 0,
    //paddingTop: 10,
  },
  headerText: {
    color: "#fff",
    fontSize: 25,
    fontWeight: "bold",
    textAlign: "center",
  },
});