如果說組件是組成頁面的基本元素,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);
AppState
在手機上,每一個APP都會隨著用戶的操作經歷不同的運行狀態。例如,當用戶切換到其他APP或者回到手機主屏時,你的應用可能會被移至後台。而AppState
可以幫助我們捕捉這些狀態的變化,讓我們能夠採取適當的行爲,如保存數據、釋放資源或刷新用戶界面等。
狀態分為:
active
- APP處於前台運行。用戶正在互動或查看你的應用。background
- APP已被移至後台,但仍在運行。可能的原因有很多,如用戶切換到了另一個APP、返回到主屏幕,或者因為系統資源管理而將其移至後台。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。
Linking.openURL('https://www.google.com');
Linking.openURL('whatsapp://send?text=hello');
'whatsapp://send?text=hello'
是一個特定的URL模式,稱為URI scheme。當它被觸發時,它會嘗試打開WhatsApp應用(如果安裝了的話)並帶上"hello"字串過去。
本篇介紹了React Native的常用API。透過熟悉這些API,可以更有效、更順利的開發React Native APP。