water-sys/app/screens/MemberScreen/CompanyScreen.tsx

// 公司介绍
import React, { useRef, useState } from "react";
import {
  View,
  Text,
  Image,
  TouchableOpacity,
  ScrollView,
  StyleSheet,
} from "react-native";
import { useNavigation } from "@react-navigation/native";
import { NativeStackNavigationProp } from "@react-navigation/native-stack";
import { RootStackParamList } from "../../types/navigation";
import { VideoView, useVideoPlayer } from "expo-video";
import BackIcon from "../../components/BackIcon";

export const CompanyScreen = () => {
  const [showVideo, setShowVideo] = useState(false);
  const player = useVideoPlayer({
    uri: "https://app.brainnel.com/static/uploadfile/file/2023-02-03/63dcb246a86aa.mp4",
  });
  const navigation =
    useNavigation<NativeStackNavigationProp<RootStackParamList>>();
  // Only UI, no logic or API

  const goDetail = () => {};

  return (
    <ScrollView style={{ flex: 1, backgroundColor: "#fff" }} bounces={false} overScrollMode="never" showsVerticalScrollIndicator={false}>
      {/* Top Bar */}
      <View style={styles.indexTop}>
        <Image source={require("../../../assets/img/公司介绍 1 (1).png")} />
        <View style={styles.headAbsolute}>
          <TouchableOpacity onPress={() => navigation.goBack()}>
            <BackIcon />
          </TouchableOpacity>
          <View style={styles.headTitleWrapper}>
            <Text style={styles.headTitleText}>关于公司</Text>
          </View>
        </View>
      </View>

      {/* Introduction */}
      <View style={styles.intro}>
        <Text style={styles.introworld}>
          A world-leading customization service for small business.
        </Text>
        <Text style={styles.offredes}>
          Brainnel offers comprehensive, highly competitive benefits to the
          brainners and consumers that have used the application since Day One,
          including better selection at a more advantaged price, reliable
          after-sales service, and harmonious community culture.
        </Text>
        {/* Product Data */}
        <View style={styles.products}>
          <View style={styles.productItem}>
            <Text style={[styles.productItemTop, { color: "#FF5100" }]}>
              56M<Text style={{ fontSize: 24 }}>+</Text>
            </Text>
            <Text style={styles.productItemBot}>Customizable products</Text>
          </View>
          <View style={styles.productItem}>
            <Text style={styles.productItemTop}>
              1M<Text style={{ fontSize: 24 }}>+</Text>
            </Text>
            <Text style={styles.productItemBot}>
              Customization service provider
            </Text>
          </View>
        </View>
      </View>

      {/* Media */}
      <View style={{ marginTop: 40, paddingLeft: 19, paddingRight: 19 }}>
        <Text style={styles.faisons}>What we do</Text>
        <Text style={styles.faisons1}>What we do</Text>
        <Image
          source={require("../../../assets/img/公司介绍 1 (2).png")}
          style={{ width: "100%", height: 200, marginTop: 10 }}
        />

        <Text style={styles.offredes}>
          Brainnel offers comprehensive, highly competitive benefits to the
          brainners and consumers that have used the application since Day One,
          including better selection at a more advantaged price, reliable
          after-sales service, and harmonious community culture.
        </Text>
        {/* <ScrollView horizontal>
          {indexProductList.info.map((item, i) => (
            <View key={i} style={styles.showImages1}>
              <Video
                source={{ uri: item.url }}
                poster={item.src}
                style={{ width: '100%', height: 200 }}
                controls
                resizeMode="cover"
              />
              <View style={styles.videoFooter}>
                <Text style={{ color: '#fff' }}>{item.remark}</Text>
              </View>
            </View>
          ))}
        </ScrollView> */}
      </View>

      <View style={{ marginTop: 40, paddingLeft: 19, paddingRight: 19 }}>
        <Text style={styles.faisons}>Media</Text>
        <Text style={styles.faisons1}>Media</Text>
      </View>

      <View style={{ marginTop: 40, paddingLeft: 19, paddingRight: 19 }}>
        <VideoView player={player} style={styles.video} nativeControls />
      </View>

      {/* Register/Login */}
      <TouchableOpacity style={styles.registerBtn} onPress={goDetail}>
        <Text style={{ color: "#fff", textAlign: "center" }}>
          Register or sign in
        </Text>
      </TouchableOpacity>
    </ScrollView>
  );
};

const styles = StyleSheet.create({
  indexTop: {
    width: "100%",
    backgroundColor: "#fff",
    // Other styles
  },
  headAbsolute: {
    position: "absolute",
    left: 0,
    right: 0,
    top: 0,
    height: 48,
    flexDirection: "row",
    alignItems: "center",
    paddingLeft: 19,
    paddingRight: 19,
    paddingTop: 10,
    paddingBottom: 10,
    zIndex: 10,
  },
  headTitleWrapper: {
    position: "absolute",
    left: 0,
    right: 0,
    top: 0,
    bottom: 0,
    justifyContent: "center",
    alignItems: "center",
    pointerEvents: "none",
  },
  headTitle: {
    // 不再需要 marginLeft
  },
  headTitleText: {
    fontSize: 16,
    fontWeight: "bold",
  },
  indexTopItemFirst: {
    // Styles
  },
  intro: {
    padding: 20,
    marginTop: 20,
  },
  introworld: {
    fontSize: 22,
    fontWeight: "bold",
    color: "#242529",
  },
  offredes: {
    fontSize: 16,
    color: "#000",
    marginTop: 10,
  },
  products: {
    flexDirection: "row",
    justifyContent: "space-between",
    marginTop: 20,
  },
  productItem: {
    width: "45%",
    alignItems: "center",
  },
  productItemTop: {
    fontSize: 30,
    fontWeight: "bold",
    color: "#002fa7",
  },
  productItemBot: {
    marginTop: 10,
    backgroundColor: "rgba(186, 221, 255, 0.15)",
    borderRadius: 5,
    fontSize: 14,
    color: "#05A9C8",
    padding: 6,
    textAlign: "center",
  },
  faisons: {
    fontSize: 30,
    fontWeight: "bold",
    color: "#D4D8E0",
    opacity: 0.6,
    textAlign: "center",
  },
  faisons1: {
    fontSize: 24,
    fontWeight: "bold",
    color: "#0035a3",
    textAlign: "center",
    marginTop: -19,
  },
  showImages1: {
    width: 300,
    marginRight: 10,
  },
  videoFooter: {
    height: 40,
    backgroundColor: "#000",
    justifyContent: "center",
    alignItems: "center",
    borderBottomLeftRadius: 10,
    borderBottomRightRadius: 10,
  },
  registerBtn: {
    margin: 20,
    backgroundColor: "#FF5100",
    borderRadius: 20,
    padding: 15,
  },
  video: {
    alignSelf: "center",
    width: "100%",
    height: 200,
  },
});