由於 OpenWeatherMap API 需要提供經緯度，所以我們需要取得使用者的位置資訊，這時候就可以使用 Expo Location 來取得使用者的位置資訊。

安裝設定

首先我們需要安裝 expo-location：

$ npx expo install expo-location

接著在 app.json 中加入 permissions：

{
  "expo": {
    "plugins": [
      [
        "expo-location",
        {
          "locationAlwaysAndWhenInUsePermission": "Allow"
        }
      ]
    ]
  }
}

然後 iOS 模擬器的定位功能預設是關閉的，所以我們需要手動開啟，點選模擬器的 Features -> Location -> Custom Location，然後輸入經緯度，就可以開啟定位功能了。

而 Android 模擬器的定位功能預設應該是開啟的，所以不用特別設定。但如果沒有的話，就打開模擬器，就像在使用手機一樣，從手機中的設定 -> 位置 -> 使用位置資訊，然後開啟。

使用

接下來在 App.tsx 中使用 expo-location 和 useEffect：

import { useEffect, useState } from 'react'
import { View, SafeAreaView, ScrollView } from 'react-native'
import * as Location from 'expo-location'

export default function App() {
  const [location, setLocation] = useState<object | null>({})
  const [errorMsg, setErrorMsg] = useState<string | null>('')

  console.log(location)

  useEffect(() => {
    ;(async () => {
      let { status } = await Location.requestForegroundPermissionsAsync()
      if (status !== 'granted') {
        setErrorMsg('Permission to access location was denied')
        return
      }

      let location = await Location.getCurrentPositionAsync({})
      setLocation(location)
    })()
  }, [])
  // 省略
}

開啟模擬器後，首先會跳出詢問是否允許 App 使用定位的視窗。

選擇允許後，就可以在 Terminal 看到取得的位置資訊：

LOG  {"coords": {"accuracy": 5, "altitude": 0, "altitudeAccuracy": -1, "heading": -1, "latitude": 25.042435, "longitude": 121.513878, "speed": -1}, "timestamp": 1695562971788.108}

拿到位置資訊後，我們就可以使用 OpenWeatherMap API 來取得天氣資訊了，這部分就留到下一篇再來實作，明天見👋！