Day 25 放入了原生元件的程式碼。

接著使用 JavaScript 將該 Module 導入。

在專案根目錄中，加入以下檔案。

// ProgressNotification.js

import { NativeModules } from 'react-native';
const { ProgressNotification } = NativeModules;

export default ProgressNotification;

然後在 App.js 宣告模擬下載進度的方法 startDownload，以及暫存下載進度數值的變數 [progress, setProgress]。最後則是相關的按鈕及文字。

// App.js

const [progress, setProgress] = useState(0);

  const styles = StyleSheet.create({
    container: {
      flex: 1,
      justifyContent: 'center',
      alignItems: 'center',
      padding: 20,
    },
    progressText: {
      fontSize: 18,
      marginBottom: 20,
    },
  });

  const startDownload = async () => {
    setProgress(0);
    for (let i = 0; i <= 100; i += 10) {
      setProgress(i);
      await ProgressNotification.showProgressNotification(
          'Downloading',
          `Progress: ${i}%`,
          i
      );
      // Simulate a delay (e.g., actual download time)
      await new Promise(resolve => setTimeout(resolve, 1000));
    }
    await ProgressNotification.hideProgressNotification();
    setProgress(100);
  };