crazycharge-app/component/test/map.tsx

import React, { useEffect, useState } from "react";
import { StyleSheet, View } from "react-native";
import MapView, { Marker } from "react-native-maps";
import * as Location from "expo-location";
import { LocationObject } from "expo-location";
import { mapStyle } from "../../style/map";

export default function Index() {
  /**********************************狀態管理**********************************/
  const [location, setLocation] = useState<LocationObject>();

  useEffect(() => {
    (async () => {
      let { status } = await Location.requestForegroundPermissionsAsync();
      if (status !== "granted") {
        console.log("Permission denied");
        return;
      }

      let location = await Location.getCurrentPositionAsync({});
      setLocation(location);
    })();
  }, []);
  /**********************************狀態管理**********************************/
  /**********************************組件初始化**********************************/
  /**********************************組件初始化**********************************/
  /**********************************異步函數**********************************/
  /**********************************異步函數**********************************/
  return (
    <View>
      {location && (
        <MapView
          customMapStyle={mapStyle}
          followsUserLocation={true}
          initialRegion={{
            latitude: 22.3193,
            longitude: 114.1694,
            latitudeDelta: 0.1,
            longitudeDelta: 0.1,
          }}
          showsPointsOfInterest={false}
          showsUserLocation={true}
          showsBuildings={false}
          showsTraffic={false}
          style={styles.map}
        >
          <Marker
            coordinate={{ latitude: 22.3193, longitude: 114.1694 }}
            title="Marker Title"
            onPress={() => {}}
            description="Marker Description"
          />
        </MapView>
      )}
    </View>
  );
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  map: {
    width: "100%",
    height: "100%",
  },
});