iT邦幫忙

2023 iThome 鐵人賽

DAY 8
0
Mobile Development

30天React Native之旅:從入門到活用系列 第 8

Day 8:React Native常用API

  • 分享至 

  • xImage
  •  

如果說組件是組成頁面的基本元素,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')
        }
      ]
    );
    

    https://ithelp.ithome.com.tw/upload/images/20230923/20103365u0BgFGzBTm.png
    帶文字輸入框(僅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'
    );
    

    https://ithelp.ithome.com.tw/upload/images/20230923/20103365q0oqqC8A37.png

  • 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。


上一篇
Day 7:React Native常用組件
下一篇
Day 9:React Native樣式與佈局
系列文
30天React Native之旅:從入門到活用30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言