React Native的地圖功能實現

要在React Native中實現地圖功能，您可以使用第三方庫react-native-maps

1. 首先，確保您已經安裝了Node.js和npm。然后，在項目根目錄下運行以下命令來安裝react-native-maps庫：

npm install react-native-maps --save

2. 對于iOS，您需要使用CocoaPods來安裝一些依賴項。在ios文件夾下創建一個名為Podfile的文件（如果尚不存在），并添加以下內容：

platform :ios, '10.0'
require_relative '../node_modules/react-native/scripts/react_native_pods'
require_relative '../node_modules/@react-native-community/cli-platform-ios/native_modules'

target 'YourProjectName' do
  config = use_native_modules!

  use_react_native!(:path => config["reactNativePath"])

  target 'YourProjectNameTests' do
    inherit! :complete
    # Pods for testing
  end

  # Enables Flipper.
  #
  # Note that if you have use_frameworks! enabled, Flipper will not work and
  # you should disable the next line.
  use_flipper!()

  post_install do |installer|
    react_native_post_install(installer)
  end
end

將YourProjectName替換為您的項目名稱。然后，在ios文件夾下運行pod install。

3. 在您的React Native組件中，導入react-native-maps庫并創建一個地圖組件。例如，在App.js中：

import React, {useRef} from 'react';
import {View, StyleSheet} from 'react-native';
import MapView, {Marker} from 'react-native-maps';

const App = () => {
  const mapRef = useRef(null);

  const handleMarkerPress = (location) => {
    console.log('Marker pressed:', location);
  };

  return (
    <View style={styles.container}>
      <MapView
        ref={mapRef}
        style={styles.map}
        initialRegion={{
          latitude: 37.78825,
          longitude: -122.4324,
          latitudeDelta: 0.0922,
          longitudeDelta: 0.0421,
        }}
      >
        <Marker
          coordinate={{
            latitude: 37.78825,
            longitude: -122.4324,
          }}
          title="My Marker"
          onPress={() => handleMarkerPress({latitude: 37.78825, longitude: -122.4324})}
        />
      </MapView>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
  map: {
    width: '100%',
    height: '100%',
  },
});

export default App;

在這個例子中，我們創建了一個MapView組件，并設置了初始區域。我們還添加了一個Marker組件，當點擊時會調用handleMarkerPress函數。

現在，您應該可以在模擬器或設備上看到一個地圖，并在點擊標記時在控制臺中打印出位置信息。您可以根據需要自定義地圖樣式、添加更多標記等。要了解更多關于react-native-maps庫的信息，請參閱官方文檔：https://github.com/react-native-maps/react-native-maps。