如果說組件是組成頁面的基本元素，API則是則是建構功能模塊的基本元素。本篇將介紹主要的常見的API。

• AppRegistry

  整個React Native APP的入口。
  我們可以在React Native項目中的index.js看到相關程式碼

  import {AppRegistry} from 'react-native';
  import App from './App';
  import {name as appName} from './app.json';
  
  AppRegistry.registerComponent(appName, () => App);
  

  • registerComponent: 用於註冊應用的入口組件。第一個參數是應用的名稱，第二個參數是一個函數，該函數返回你的根組件。

• AppState

  在手機上，每一個APP都會隨著用戶的操作經歷不同的運行狀態。例如，當用戶切換到其他APP或者回到手機主屏時，你的應用可能會被移至後台。而AppState可以幫助我們捕捉這些狀態的變化，讓我們能夠採取適當的行爲，如保存數據、釋放資源或刷新用戶界面等。

  狀態分為：

  • active - APP處於前台運行。用戶正在互動或查看你的應用。
  • background - APP已被移至後台，但仍在運行。可能的原因有很多，如用戶切換到了另一個APP、返回到主屏幕，或者因為系統資源管理而將其移至後台。
  • [iOS] inactive - 這是iOS獨有的狀態。它表示應用正在前後台之間進行切換，這種切換可能會很快。例如，當有電話來電或用戶點擊雙鍵進入多任務切換時，應用會短暫地進入此狀態。

  如何使用：

  • 獲取當前狀態：可以使用AppState.currentState來獲取應用的當前狀態。

    import { AppState } from 'react-native';
    const currentState = AppState.currentState;
    
    console.log(currentState);  //  "active" or "background" or "[iOS] inactive"
    

  • 監聽狀態變化：大多數時候，我們會想知道應用何時從一個狀態轉換到另一個狀態。例如，當應用進入後台時，我們可能想要保存一些數據或停止某些活動。利用AppState的addEventListener，我們可以方便的追蹤這些變化。

    import React, { useEffect } from 'react';
    import { View, AppState, Text } from 'react-native';
    
    useEffect(() => {
        AppState.addEventListener('change', handleAppStateChange);
    });
    
    function handleAppStateChange(nextAppState) {
        console.log('nextAppState ',nextAppState)
    }
    

• AsyncStorage

  在Web前端開發中，我們習慣使用localStorage和sessionStorage來進行數據緩存。但在React Native中，無法直接使用瀏覽器的API，因此React Native提供了AsyncStorage作為解決方案。

  安裝：
  在過去是React Native內建，後來改為社群維護，所以我們要先安裝

  npm install @react-native-async-storage/async-storage
  cd ios
  pod install //安裝ios依賴
  

  pod是CocoaPods的命令。搭建環境篇也有提到CocoaPods，它是一個用於管理iOS開發的依賴庫的工具。當你執行pod install時，它會根據位於iOS目錄中的Podfile安裝所需的依賴。若install過程中出現問題，請檢查妳的CocoaPods。

  基礎使用：

  • 設置資料 setItem： 和locslStore一樣式key與value的組合。

    AsyncStorage.setItem('test','so good'); // key, value
    

  • 獲取資料 getItem：傳入key獲取資料。

    AsyncStorage.getItem('test');
    

  • 移除資料 removeItem：移除特定資料。

    AsyncStorage.removeItem('test');
    

  • 清空所有 clear：移除存儲中的所有數據。

    AsyncStorage.clear();
    

  要注意的是，AsyncStorage是非同步的，所以使用時需要確保你的操作正確，尤其是在存儲和讀取時。建議使用async/await來處理。

• Dimensions
  用於獲取螢幕寬高，使用方法：

  import { Dimensions } from 'react-native';
  
  // 獲取螢幕寬度
  const windowWidth = Dimensions.get('window').width;
  // 獲取螢幕高度
  const windowHeight = Dimensions.get('window').height;
  

  監聽螢幕尺寸的變化，可以使用 addEventListener 和 removeEventListener：

  useEffect(() => {
  const onChange = ({ window }) => {
      // 處理尺寸變化的事件
  };
  
  Dimensions.addEventListener("change", onChange);
  
  return () => {
      Dimensions.removeEventListener("change", onChange);
      };
  }, []);
  

  對於函數組件，React Native官方推薦使用 useWindowDimensions hook，因為這可以確保當螢幕尺寸發生變化時自動重新渲染：

  import { useWindowDimensions } from 'react-native';
  
  const windowDimensions = useWindowDimensions();
  const windowWidth = windowDimensions.width;
  const windowHeight = windowDimensions.height;
  

• Alert
  彈出提示框，主要方法是 Alert.alert()，它可以接收多個參數，包括對話框的標題、消息、按鈕等。

  import { Alert } from 'react-native';
  
  // 基本的提示框
  Alert.alert('Hello', 'Welcome to React Native!');
  
  // 帶有按鈕的對話框
  Alert.alert(
    'Confirmation',
    'Do you want to save the changes?',
    [
      {
        text: 'Cancel',
        onPress: () => console.log('Cancel Pressed'),
        style: 'cancel'
      },
      {
        text: 'OK',
        onPress: () => console.log('OK Pressed')
      }
    ]
  );
  

  
  帶文字輸入框（僅IOS支援）

  Alert.prompt(
    'Enter password',
    'Enter your password to proceed',
    [
      {text: 'Cancel', onPress: () => console.log('Cancel Pressed'), style: 'cancel'},
      {text: 'OK', onPress: password => console.log('OK Pressed, password: ' + password)}
    ],
    'secure-text'
  );
  

  

• BackHandler（Android）

  很多Android設備是有實體返回鍵的，所以Android會需要特別對這顆鍵寫一些方法，而BackHandler就是用來監聽 Android 實體返回鍵的 API
  範例：當用戶嘗試使用返回鍵時，會彈出一個提示框問用戶是否確定要離開APP：

  useEffect(() => {
    const backAction = () => {
      Alert.alert('Hold on!', 'Are you sure you want to go back?', [
        {
          text: 'Cancel',
          onPress: () => null,
          style: 'cancel',
        },
        {text: 'YES', onPress: () => BackHandler.exitApp()},
      ]);
      return true;
    };
  
    const backHandler = BackHandler.addEventListener(
      'hardwareBackPress',
      backAction,
    );
  
    return () => backHandler.remove();
  }, []);
  

• Platform

  Platform 能讓開發者知道APP當前是運行在哪種設備上（例如iOS或Android）。這樣就可以針對不同的平台進行特定的行為。

  import { Platform } from 'react-native';
  
  if (Platform.OS === 'android') {
    // Android 設備的特定邏輯
  } else if (Platform.OS === 'ios') {
    // iOS 設備的特定邏輯
  }
  

• Linking

  Linking模塊可以從APP內部打開其他的URL或其他APP。

  • 打開URL：可以打開網頁或其他支持的URL格式。

  Linking.openURL('https://www.google.com');
  

  • 打開其他APP(Deeplink)：你可以嘗試打開其他已安裝的APP，例如Whatsapp。

  Linking.openURL('whatsapp://send?text=hello');
  

  'whatsapp://send?text=hello'是一個特定的URL模式，稱為URI scheme。當它被觸發時，它會嘗試打開WhatsApp應用（如果安裝了的話）並帶上"hello"字串過去。

  • whatsapp://：WhatsApp的自定義URI scheme。
  • send?text=hello：查詢參數。

小結

本篇介紹了React Native的常用API。透過熟悉這些API，可以更有效、更順利的開發React Native APP。